1.发送get请求

Get.html代码：

！DOCTYPE  html

Html  lang='en  '

头(电影)

meta  charset=' utf-8 '

元名称=' viewport  ' content=' width=device-width，initial-scale=1.0 '

meta  http-equiv=' x-ua-compatible  ' content=' ie=edge  '

TitleAjax  Get请求/title

风格(音乐)

#result  {

Width: 200px

海特： 100px

Border:solid  1px  # 90b

}

/style

/head

菩提

发送Button请求/单击button

Div  id='result'/div

脚本(脚本)

//导入button元素

constbtn=document  . getelementsbytagname(' button  ')[0]；

const  result=document  . getelementbyid(' result  ')；

//绑定事件

Btn.onclick=function() {

//1。创建对象

const  xhr=new  XMLHttpRequest()；

//2。初始化、请求方法和URL设置

xhr  . open(“get”，“http://127 . 0 . 0 . 133608000/server”)；

//3。发送

XHR  . Send()；

//4。处理服务器返回结果的事件绑定

//on什么时候.

//readystate是xhr对象的属性，表示状态0 1 2 3 4

//变更变更

xhr  . onreadystatechange=function(){

//决定服务器是否返回所有结果

IF(xhr  . ready  state==4){

//响应状态代码200 404 403 401 500判断

//2xx成功标记

IF(xhr  . status=200 xhr  . status  300){

//响应线

//console  . log(xhr  . status)；//状态代码

//console  . log(xhr  . status  text)；//状态字符串

//console  . log(xhr  . getallresponseheaders())；//所有响应标头

//console  . log(xhr  . response)；//回答者

result  . innerhtml=xhr  . response；

} else  {

}

}

}

}

/脚本

/body

/html

Onreadystatechange()有四个值，readystate()函数的值分别为0-1、1-2、2-3和3-4

xhr  . open(“get”，“http://127 . 0 . 0 . 133608000/server”)；客户端发送get请求，服务器的路由也需要get、app.get  ('/server  '，(request，response)={，客户端发送post请求时，服务器端也需要设置post

2.发送post请求

Post.html代码：

！DOCTYPE  html

Html  lang='en  '

头(电影)

meta  charset=' utf-8 '

元名称=' viewport  ' content=' width=device-width，initial-scale=1.0 '

meta  http-equiv=' x-ua-compatible  ' content=' ie=edge  '

TitlePost/title

风格(音乐)

#result  {

Width: 200px

海特： 100px

Border: solid  1px  # 903

}

/style

/head

菩提

Div  id='result'/div

脚本(脚本)

const  result=document  . getelementbyid(' result  ')；

result  . addevent  listener(' mouse  over  '，function  () {

const  xhr=new  XMLHttpRequest()；

xhr  . open(“post”，“http://127 . 0 . 0 . 133608000/server”)；

//设置请求标题信息

xhr  . setrequestheader(‘content-type’，‘application/x-www-form-urlencoded’)；

XHR  . Send(' A=100 B=200 C=300 ')；//传输参数值

xhr  . onreadystatechange=function(){

IF(xhr  . ready  state==4){

IF(xhr  . status=200 xhr  . status  300){

result  . innerhtml=xhr  . response；

}

} else  {

}

}

})；

/脚本

/body

/html

3.服务器端响应JSON数据

Json.html代码：

！DOCTYPE  html

Html  lang='en  '

头(电影)

meta  charset=' utf-8 '

元名称=' viewport  ' content=' width=device-width，initial-scale=1.0 '

meta  http-equiv=' x-ua-compatible  ' content=' ie=edge  '

标题JSON/标题

风格(音乐)

#result  {

Width: 200px

海特： 100px

Border: solid  1px  # 89b

}

/style

/head

菩提

Div  id='result'/div

脚本(脚本)

const  result=document  . getelementbyid(' result  ')；

Window.onkeydown=function() {

const  xhr=new  XMLHttpRequest()；

//设置响应者数据类型，自动转换数据

Xhr.responseType=' json

xhr  . open(“get”，“http://127 . 0 . 0 . 133608000/JSON-server”)；

XHR  . Send()；

xhr  . onreadystatechange=function(){

IF(xhr  . ready  state==4){

IF(xhr  . status=200 xhr  . status  300){

//result  . innerhtml=xhr  . response；

//手动将响应数据转换为对象

//letdata=JSON  . parse(xhr  . response)；

//console.log(数据)；

//result  . inner  html=data  . name；

//自动转换数据

console  . log(xhr  . response)；

result  . innerhtml=xhr  . response  . name；

}

} else  {

}

}

}

/脚本

/body

/html

Xhr.responseType=' jsonXhr.response将自动转换为对象类型

4.服务器端

Servser.js代码：

//express简介

const  express=require(' express  ')；

//创建应用程序对象

const  app=express()；

//创建路由规则

//get请求

App.get  ('/server  '，(请求，响应)={

//设置响应标头

response  . setheader(' access-control-allow-origin  '，' * ')；

//设定回应者

response  . send(' hello  Ajax  GET  ')；

})；

//post请求

App.post  ('/server  '，(请求，响应)={

//设置响应标头

response  . setheader(' access-control-allow-origin  '，' * ')；

//设定回应者

response  . send(' hello  Ajax  POST  ')；

})；

//服务器端响应JSON数据

App.get  ('/JSON-server  '，(request，response)={

//设置响应标头

response  . setheader(' access-control-allow-origin  '，' * ')；

//设定回应者

Const  data={

Name  :“杰瑞”

}

var  str=JSON  . stringify(data)；

response  . send(str)；

})；

//监听端口启动服务

App.listen(8000，()={

Console.log(“服务已启动，正在侦听8000端口.”)；

})；