原生ajax的创建过程

ajax是什么？

主要是用来实现客户端和服务端异步通信的效果，实现页面的局部刷新，ajax原生方式主要是通过XMLHttpRequest,ActiveObject(IE)对象来实现异步通信效果

ajax的优点

ajax的优势在哪儿?
1.不需要插件的支持，可以直接被大多数主流的浏览器支持

2.提高web程序性能：传统模式是通过form表单，数据获取是通过页面刷新获取整页内容，ajax可以通过XMLHttpRequest对象向服务器请求数据；
3.提高了用户体验
4.无须刷新页面即可获取数据

ajax的应用场景

用户登录注册，检测用户数据是否重复
做城市选择，用到二级联动或者三级甚至更高时，可以使用Ajax;

原生ajax的创建过程

1、创建xhr核心对象

var xhr=new xmlHttpRequest()

2、调用open发送请求

• :参数1：请求方式，get post
• 参数2：url 请求地址
• 参数3：true异步，false同步

xhr.open('post',url,true)

3.如果是post请求，必须设置请求头

xhr.setRequestHeader('Content-Type', 'application/json')

4.调用send 发送请求 （如果不需要参数，就写null）

xhr.send('user=tom&age=10&sex=女')

5.监听异步回调 onreadystatechange

• 判断readyState 为4 表示请求完成
• 判断status 状态码 为 200 表示接口请求成功
• responeseText 为相应数据。字符串类型。

  xhr.onreadystatechange=function(){
          if(xhr.readyState==4){ 
            if(xhr.status==200){
              console.log(xhr.responseText);
              var res=JSON.parse(xhr.responseText);
              console.log(res);
              if(res.code==1){
                modal.modal('hide');
                location.reload();
              }
            }
          }
          //常见的http状态码
          //200请求成功   301请求资源移动到新的url地址
          //403客户端请求无权限，服务器拒绝请求
          //404找不到文件
          //500服务内部错误,一般是服务端代码有问题
          //502网关错误，服务端返回无效响应
          //503服务器性能问题导致，无法处理客户端请求
          

jq方式

$.ajax({
	url:"",//请求地址
	type:"",//请求方式  get或post
	async: true  //true异步  false同步
	dataType:"json"   //请求的数据类型
	success:(res)=>{
	//成功执行的回调函数
	},
	error:(error)=>{
	//失败执行的回调函数
	}
})