Ajax技术总结

Ajax

传统网站存在的问题

• 网速慢的情况下，页面加载时间长，用户只能等待
• 表单提交后，如果一项内容不合适，需要重新填写所有的表单内容，使用效果差。
• 页面跳转，就会重新加载页面，造成资源浪费，增加用户等待时间。

Ajax概述

Ajax（Asynchronous JavaScript and XML），直译为“异步的JavaScript与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。

Ajax的应用场景

• 页面上拉加载更多数据
• 列表数据无刷新分页
• 表单项离开焦点数据验证
• 搜索框提示文字下拉列表

Ajax的基本使用步骤

1.创建Ajax对象

var xhr = new XMLHttpRequest();

2.告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com');

3.发送请求

xhr.send();

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

//设置监听器，等到服务器发送响应之后便执行下面的函数
xhr.onload = function () {
	console.log(xhr.requestText);
}

请求参数传递

• GET请求方式

xhr.open('get','http://www.baidu.com?name=zhangsan&age=13')

• POST请求方式

//设置请求头Content-Type，告诉服务器当前请求参数的格式是字符串
xhr.setRequestHeader('content-Type',
	'application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20')

请求参数的格式
1.application/x-www-form-urlencoded

name=zhangsan&age=13

2.application/json

{name:'zhangsan',age:'20',sex:'男'}

服务器一般是以JSON对象传输数据，以下是JSON对象的两个重要方法：

• parse() 将字符串转换成json对象
• stringify() 将json对象转换成json字符串
  注意：get请求不能提交json对象数据格式，传统网站的表单提交也不支持json对象数据格式的。

获取服务器端的响应

Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接收服务器端的响应数据，这个过程中的每一个步骤都会对应一个数值，这个就是ajax状态码。
0：请求未初始化（还没有调用open()）
1：请求已经建立，但是还没有发送（还没有调用send()）
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了

xhr.readyState //获取Ajax状态码

var xhr = new XMLHttpRequest();
//0 已经创建了还没有初始化
console.log(xhr.readyState);
xhr.open('get','http://www.baidu.com');
//1 请求已经建立，但还没发送
console.log(xhr.readyState);
//当Ajax状态码改变后触发,必须要写在send之前
xhr.onreadyStateChange = function (){
	//2 请求已经发送
	//3：请求正在处理中，通常响应中已经有部分数据可以用了
	//4：响应已经完成，可以获取并使用服务器的响应了
	console.log(xhr.readyState);
}
xhr.send();

总结： 获取服务端响应的两种方法
1.利用onload

xhr.send();
xhr.onload = function () {
	console.log(xhr.requestText);
}

2.通过readyState状态码

xhr.onreadyStateChange = function (){
	if(xhr.readyState == 4) {
		console.log(xhr.responseText);
	}
}
xhr.send();

两种获取服务器端的区别

区别描述	onload事件	onReadyStateChange事件
是否兼容IE低版本	不兼容	兼容
是否要判断Ajax状态码	不需要	需要
被调用次数	一次	多次

Ajax错误处理

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

• 可以判断服务器端返回的状态码，分别进行处理，xhr.status获取http状态码
  2.网络畅通，服务器端没有接受到请求，返回404状态码
• 检查请求地址是否出错
  3.网络畅通，服务器端能接收到请求，返回500状态码
• 服务器出错，找后端程序员沟通
  4.网络中断，请求无法发送到服务器
• 会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

低版本IE浏览器的缓存问题

问题：在低版本IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果，即使服务器端的数据更新了，客户端拿到的依然是缓存中的旧数据。
解决方案：在请求地址的后面加请求参数，保证每一次的请求参数的值不同。

xhr.open('get','http://www.baidu.com'+Math.random());

Ajax封装

将Ajax的发送步骤封装成一个函数，我们每发送Ajax请求，只需调用该函数，将相关的参数传进去即可。参数有：type（请求方式post/get），url（请求地址），回调函数（success，error 可选），header（设置请求头）

function ajax(option){
            var xhr = new XMLHttpRequest();
            //为函数的参数设置默认值，这样在调用函数是可以有选择的传递参数
            var defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                    'Content-type':'application/x-www-form-urlencoded'
                },
                success:function (data,object) {},
                error:function (data,object) {}

            }
            //使用option对象中的属性覆盖defaults对象中的参数，会作用到defaults对象
            Object.assign(defaults,option);
            //拼接请求参数
            var param = '';
            for(var key in defaults.data){
                    param += key + '=' + defaults.data[key] + '&';
                }
                param = param.substr(0,param.length-1)
                //判断请求方式，get方式请求参数只能在url后面添加
            if(defaults.type == 'get'){
                defaults.url += '?' + param + Math.random();
            }
            xhr.open(defaults.type,defaults.url);
            if(defaults.type == 'post'){
                let contentType = defaults.header['Content-type']
                xhr.setRequestHeader('content-type',contentType)
                if(contentType =='application/json'){
                    //数据在网上传输只能以字符串形式
                    xhr.send(JSON.stringify(option.data))
           
                }else{
                    xhr.send(param)
                }
            }
            else{
                xhr.send();//当请求方式为get时，send方法不需要带请求参数
            }
            xhr.onload = function (){
                //获取响应头中的数据类型
                let responseType = xhr.getResponseHeader('Content-type');
                let responseText = xhr.responseText;
                //检测响应回来的数据是否为JSON对象
                if(responseType.includes('application/json')){
                    responseText = JSON.parse(responseText);
                }
                if(xhr.status == 200){
                    option.success(responseText,xhr);
                }else{
                    option.error(responseText,xhr);
                }
                
            }
        }
        ajax({
            type:'get',
            url:'http://www.baidu.com',
            data:{name:'zhangsan',age:23},
            header:{
                    'Content-type':'application/json'
                },
                sucess:function (data,object) {console.log('success!');
                },
                error:function (data,object) {console.log('error!');
                }
        })