Ajax作用

前端向后端异步取数据的方法
异步：无需刷新页面的

流程

1. 创建Ajax核心对象
2. 创建请求
   • get
   • post
3. 发送请求
4. 接受响应
5. 解析数据

创建AJAX核心对象

var xmlhttp=new XMLhttpRequest()  

创建请求

xmlhttp.open("请求方式","请求地址",是否异步);

get请求

说明

请求参数不能写在send里面，要写在创建请求中的参数请求地址后面以?连接，此时send里传null
请求参数以键值对形式，多个参数之间以或&链接

语法

xmlhttp.send(null);

post请求

说明

1. 先设置请求头

xmlhttp.setRequestHeader("Content‐Type","application/x‐www‐form‐urlencod ed")

参数
Content-Type: 设置请求体内容的类型
application/x-www-form-urlencoded：设置参数的类型(后端会交代)

2. 发送请求

xmlhttp.send("值")

接受响应

Ajax的两个属性

readyState

说明

返回请求的状态

语法

xmlhttp.readyState

xmlhttp: Ajax核心对象

包含

• 0(尚未初始化)
• 1(正在请求)
• 2(请求完毕)
• 3(正在响应)
• 4(响应完毕)

status

说明

服务端返回的状态码

语法

xmlhttp.status

包含

404 500 200(ok) 301 304

请求响应

onreadystatechange事件

说明

当readyState即请求状态发生改变时，会触发onreadystatechange事件

补充

当请求完毕且服务器响应状态码才有数据 即:

xmlhttp.readyState==4&&xmlhttp.status==200

获取服务器的响应内容

repsponseText属性

说明

用于获取字符串形式的响应数据

语法

xmlhttp.responseText

请求后常见的返回数据的格式json

说明

javascript object notation 一种数据格式同样是对象

语法

和js对象语法一样，都是由键值对构成

方法

parse

将json字符串转换为对象

JSON.parse(json格式字符串)

stringify

将对象转换为json字符串

JSON.stringify(对象)