如何实现ajax请求和处理

1、ajax是什么

我理解的ajax就是一种异步请求数据的方式。ajax主要依赖浏览器提供的XMLHttpRequest对象，而这个对象具有使得浏览器可以发出HTTP请求与接收HTTP响应的功能，从而实现了在页面不刷新的情况下和服务器进行数据交互。

2、原生js如何实现ajax请求

主要有以下五个步骤：（非常重要）
（1）创建XMLHttpRequest对象

var xhr = new XMLHttpRequest()

（2）初始化一个请求

xhr.open('GET/Post','url',ascyn) 

（3）发送该请求,此时就能获取到请求的数据了

xhr.send()

（4）获取数据，分为同步和异步

当同步获取数据时

var data = xhr.responseText
console.log(data) 

缺点：如果网络请求特别慢，页面就卡住一直等待数据的请求，用户就无法操作。所以我们只能用异步的方式（不推荐同步）。

当异步获取数据时

//监听数据，内部数据到了会触发load
 xhr.addEventListener('load', function () {
    // 如果响应状态是200到300以内，或者等于304
    // 200到300都是请求数据成功的
    // 304 重定向（缓存）
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
      //responseText：响应文本（内容）
      var data = xhr.responseText
      console.log(data)
    }else{
      console.log('出错了')
    }
 }

因为代码是从上往下执行的，数据请求的速度没比不上代码的执行速度，所以需要监听数据的到来

最后完整的写法是：

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hello.php', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('服务器异常')
        }
    }
}
xhr.onerror = function(){
    console.log('服务器异常')
}
xhr.send()

2、jquery中如何使用ajax

$.ajax({
            url:"/user/login",//url地址
            dataType:"json",//返回的数据类型
            type:"post",//发起请求的方式,get/post
            data:{//此处为请求的参数
                'name':name,
                'password':password
            },
            success:function(data) {
            //请求成功时，执行
            console.log(data)//后端接口返回的参数
            },
            error:function(){
            //请求失败时，执行
            }
        });