ajax详解

相信大家对ajax都有一定的了解,所以什么是ajax呢？
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术(局部加载)，一般运用在网页登录注册，页面检测你所输入的数值在后台是否被注册，如果被注册则会提醒你已被占用，你需要换其他方式注册。

ajax五部曲

1.get四部曲(因为get可以忽略设置响应头)

第一步:创建请求对象

var xhr=new XMLHttpRequest()//注意后面括号不要掉

为什么要将名字设置为xhr呢因为它是XMLHttpRequest的缩写，规范化

第二步:设置请求方法与请求路径

xhr.open("get","A")//A的位置填请求的路径
//以及需要传递的参数也得拼接在后面

A拼接的示例

"qingqiu.php?username"+this.value//将值传入后台比对

第三步:监听响应事件(因为为了兼容ie所以onload不能作为最优方法)
onlonad方法

xhr.onload=function(){
            console.log(xhr.responseText);
            //获取后台返回数据
        }

标准方法

xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            //获取后台返回数据
            }
        }
        //xhr.readyState==4
        //xhr.status==200
        //为什么这样写我会放在后面讲

第四步:发送请求(第三步与第四步顺序可以颠倒不会影响代码效果)

xhr.send()

最终代码为

var xhr=new XMLHttpRequest()
        xhr.open("get","A")
        // xhr.οnlοad=function(){
        //     console.log(xhr.responseText);
        //     //获取后台返回数据
        // }
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            //获取后台返回数据
            }
        }
        xhr.send()

如果要运行则只需要一个触发事件，以及后台就可以了

2.post五部曲
第一步:创建请求对象

var xhr=new XMLHttpRequest()

第二步:设置请求方式与请求路径

xhr.open("post","B")//这里的B只是路径并不携带参数

第三步:设置请求头

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//注意请求头后面的参数别输入错误，在复杂请求时我们必须使用

第四步:监听响应完成事件(因为onload的局限性所以我就不再这里再写了)
标准样式

xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            //获取后台返回数据
            }
        }

第五步:发送请求

xhr.send(B)//这里传递参数记得以键值对的形式传入

状态值(readyState)与状态码(status)

1.状态值(五种)
0.还未初始化
1.已调用send()方法，正在发送请求
2.send()方法执行完成
3.正在解析响应内容
4.响应内容解析完成

2.状态码
只要是2开头的状态码就证明网页正常
因为200，201，202,203，204,205,206都能代表着后台已经收到并返回数据，网页正常
所以为了规范可以给status判断个范围

讲完ajax的请求后我们再来聊一会返回的数据类型

JSON

.优点:方便浏览器进行解析
.书写规则:

1. 最外层必须使用{} 或者[] 包起来。
2. 不管是属性 还是属性值 都必须使用双引号包起来.

JSON转换
1.JSON.parse()
将json数组转换成js数组 。
将json对象转换成js对象。
2.JSON.stringify()
将js对象及js数组转换成json字符串。

最后我再给大家讲一下jQuery中的ajax

 $.ajax({
            //路径
            url: "data.php",
            //请求方式
            type: "post",
            // 传递的参数
            data: {
                name: "xiongjiashun",
                age: 21
            },
            // 回调函数，成功则执行此代码
            success: function (obj) {
                console.log(obj);
            },
             // 回调函数，失败则执行此代码
            error: function (obj) {
                console.log(err);
            }
        })

下一篇我将给大家封装一下ajax
ajax封装

新学的朋友看到这里我相信你们对AJAX也有了一些了解,
对ajax有一定见解的朋友如果你有建议或者发现本文有漏洞，希望能指出,谢谢大家