ajax请求参数传递和服务器响应和onreadystatechange事件和Ajax 错误处理和低版本 IE 浏览器的缓存

//1.创建ajax对象

var xhr = new XMLHttpRequest();

//2.告诉ajax对象要向哪发送请求,以什么方式发送请求,

//参数1:请求方式;参数2:请求地址

xhr.open(‘get’,‘url’);

//3.发送请求

xhr.send();

//4.获取服务器端响应到客户端的数据

xhr.onload = function(){

//响应文本

console.log(xhr.responseText)p;

}

5.服务端响应数据格式

服务器端大多情况以JSON对象作为响应数据的格式,当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中;

在http请求和响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被抓换为字符串进行传输;

JSON.parse();//将json字符串转换为js对象

JSON.stringify();//将js对象转换为json字符串

6.请求参数传递

1.传统网站表单提交

<!– http://www.example.com?username=zhangsan&password=123456 -->

2.ajax传递方式

1.GET请求方式

xhr.open(‘get’,‘http://www.example.com?name=zhangsan&age=18’);

2.POST请求方式

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’) xhr.send(‘name=zhangsan&age=20’);

3.请求参数的格式

1.application/x-www.form-urlencoded;

name=zhangsan&age=18

2.application/json

{name:‘xiaoming’,age:18}

在请求头中指定Content-Type属性值是application/json告诉服务器当前请求参数的格式是json;

JSON.stringify();//将js对象转换为json字符串

注意:get请求不能提交json对象数据格式,传统网站的表单提交也是不支持json对象数据格式;

7.获取服务器响应

1.ajax状态码

在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中每一步都会对应一个数值,这个数值就是ajax状态码;

0:请求未初始化(还没有调用open());

1:请求已经建立,但是还没有发送(还没有调用send());

2:请求已发送

3:请求正在处理中,通常响应中已经有部分数据可以使用

4:响应已经完成,可以获取并使用服务器的响应

xhr.readyState//获取Ajax状态码

2.onreadystatechange事件

当Ajax状态码发生变化时将自动触发该事件

在事件处理函数中可以获取ajax状态码并进行判断,当状态吗为4时就可以用过xhr.responseText获取服务端的响应数据;

// 当Ajax状态码发生变化时

xhr.onreadystatechange = function () {

// 判断当Ajax状态码为4时

if (xhr.readyState == 4) {

// 获取服务器端的响应数据

console.log(xhr.responseText);

}

}

两种获取服务器响应方式的区别

Ajax 错误处理

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。

可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

2. 网络畅通，服务器端没有接收到请求，返回404状态码。

检查请求地址是否错误。

3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。

服务器端错误，找后端程序员进行沟通。