AJAX-阿贾克斯 - 爱码网

什么是AJAX?

Asynchronous Javascript And Xml
Asynchornous:异步的
同步(一个任务没完成没法进行下一个任务的场景)
同步访问：当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等待，效率偏低
异步访问：当客户端向服务器发送请求时，服务器在处理过程中，客户端可以做其他的操作，
不需要一直等待，效率偏高
Xml: eXtensible Markup Language(可扩展的标签语言)

AJAX的优点：

1.异步访问
2.局部刷新

AJAX的使用场合：

1.搜索建议
2.表单验证
3.前后端完全分离

AJAX的核心对象-异步对象(XMLHttpRequest)

什么是XMLHttpRequest

简称’xhr’
称为异步对象，代替浏览器向服务器发送请求并接受响应
xhr 是由JS来提供

创建异步对象(xhr)

主流的异步对象是 XMLHttpRequest 类型的，并且主流
浏览器都支持(IE7+,chorme,Firefox,Safari,Opera)全部支持，但在IE低版本
浏览器中(IE6及其以下)，就不支持XMLHttpRequest，需要使用ActiveXObject()
来创建异步对象

   创建：
   支持 XMLHttpRequest： new XMLHttpRequest()
   不支持 XMLHttpRequest：new ActiveXObject('Microsoft.XMLHTTP')

创建一个对象 XMLHttpRequest

创建一个对象 XMLHttpRequest

var xhr = new XMLHttpRequest();为了支持ie6以及更早的版本，要 var xhr=new ActiveXObject()

2.监听请求成功后的状态变化

3.设置请求参数

4.发起请求

5.操作DOM，实现动态局部刷新

而什么是一个完整的HTTP请求呢？

AJAX-阿贾克斯

一个完整的请求由四部分组成

AJAX-阿贾克斯

接下来，我们就要监听请求成功的状态变化了

onreadystatechange：用来监听readyState的变化的

readyState：表示当前请求的后台的状态

status：表示处理的结果

其中readyState：表示当前请求的后台的状态

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

1：请求已经建立，但是还没有发送(还没有调用send())

2：请求已经发送，正在处理中

3：请求正在处理中，通常响应中已经有部分数据可以用了

4：响应已经完成，可以获取并使用服务器的响应了

而status：表示处理的结果(状态码)

1XX，表示收到请求正在处理中

status == 200 是表示处理的结果是OK的

状态码:200到300是指服务端正常返回

304:如果网页自请求者上次请求后再也没有更改过，应将服务器配置为返回此响应，进而节省带宽和开销

404:找不到对象（404 not found)

503:服务器超时

设置请求参数

xhr对象接受三个参数
1：表示请求类型
2：表示请求的网址
3：表示是否异步

get/post/put/delete

Get和post方法的区别：

get是获取数据，get的send方法的参数可以是null或者空，对发送信息有限制，一般在2000个字符，一般是用来查询（幂等）
post可以发送数据，但是在使用post方法发送数据，需要使用setRequestHeader()来添加HTTP头，同时，post的send()方法需要写入要发送的数据的值, 一般用于修改服务器上的资源，对信息数量无限制，也更安全

3常见问题

使用post提交需要忘记content-type的问题

4.解决方案

xhr.open(“post”, “/carrots-admin-ajax/a/login”,true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhr.send(“name=” + name + “&pwd=” + code);

Content-type要作为请求头放在open和send之间

编码

var xhr = new XMLHttpRequest();
function ip() {
    var name = $("#name").val();
    var code = $("#code").val();
// 指定通信过程中状态改变时的回调函数
    xhr.open("post", "/carrots-admin-ajax/a/login",true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=" + name + "&pwd=" + code);
    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                if (JSON.parse(xhr.responseText).code >= 0) {
                    window.location.href = "http://dev.admin.carrots.ptteng.com/";
                } else {
                    $(".alert").html("该用户不存在或密码不正确");
                }
            }
        }
    };
}

$(function () {
    $("#summit").click(function () {
        var name = $("#name").val();
        var code = $("#pwd").val();
        $.ajax({
            type: "POST",
            url: "/carrots-admin-ajax/a/login",
            data: {
                "name": name,
                "pwd": code
            },
            // beforeSend: function(xhr){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");},
            datatype:"json",
            success: function (data) {
                console.log(data);
                if (JSON.parse(data).code==0) {
                    alert(JSON.parse(data).message);
                }
                else {
                    alert(JSON.parse(data).message)
                }
            }
        })
    })
});