Ajax

传统方法的缺点:

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

什么是ajax？

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

两种方式：同步请求（等待请求完成再执行）和异步请求（请求和后续代码同时执行），一般情况下使用异步请求。即ajax默认异步请求。

依靠接口（用来返回数据）请求后台数据。后台封装接口，前端请求数据，使用ajax实现前后端交互。

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

原生ajax的写法分为5步：

1.创建XMLHTTPRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.更新界面

<script>
    //1.创建对象  XMLHttpRequest请求数据的对象
    var http=new XMLHttpRequest();
    //2.服务器的连接
    http.open();
    //第一个参数指请求的类型，分为get请求和post请求
    //第二个参数是请求的路径
    //第三个参数可选，同步（true）和异步（false）
    //第四个参数可选，用户名
    //第五个参数可选，密码
    //3.给服务器发送请求
    http.send();//参数一般为数据，根据请求类型选择写不写
    //4.请求读取完成事件
    http.onreadystatechange=function(){
        //根据读取的状态（http状态码）判断，
//        http.readyState   4   请求读取完成
//        http.status   200    读取的状态是成功
//        http.response   返回结果
        if(http.readyState==4&&http.status==200){
            console.log(http.response);
            //5.渲染界面
        }
    }
</script>

上面提到，请求方式分为get和post两种，那么，它们有什么区别？

• get重点在从服务器上获取资源，post重点在向服务器发送数据；
• get传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"?"连接，多个请求数据间用"&"连接，如http://127.0.0.1/Test/login.action?name=admin&password=admin，这个过程用户是可见的；post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；
• get传输的数据量小，因为受URL长度限制，但效率较高；post可以传输大量数据，所以上传文件时只能用post方式；
• get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；post较get安全性较高；
• get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。post支持标准字符集，可以正确传递中文字符。

另外，关于http状态码，列举一些常见的http状态码如下：

    1XX系列：指定客户端应相应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。

　2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。
　　200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回

        201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 '202 Accepted'

        202状态码：服务器已接受请求，但尚未处理

   3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。
　　301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

　　302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求

        304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。

　4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。
　　401状态码：请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
　　403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。

　　404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

　5XX系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。
　　500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
　　503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复。

Ajax  get方式请求

<script>
    var http=new XMLHttpRequest();
    http.open("get","./data/stu.txt");
    http.send();
    http.onreadystatechange=function (){
        if(http.readyState==4&&http.status==200)
        {
            var data=JSON.parse(http.response);//将数据类型进行转换
            console.log(data);
        }
    }
</script>

输出结果：
　　

Ajax  post方式请求

post方式在读取数据上和get方式的写法一致，输出结果也一致。如果往服务器添加数据，两者写法不同。

原生js的ajax设置同步会造成线程锁死，onreadystatechange无法进入。