[JavaScript知识库]原生ajax

ajax简单介绍

Ajax的全称是Asychronous JavaScript And XML(异步JavaScript和XML)；
ajax技术就是在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染。

ajax的核心对象：XMLHttpRequest
method(请求方式)：GET获取数据、POST发送数据、DELETE删除、PUT修改。 较为常用的请求方式为get、post

原生ajax四步

       1.// 首先创建一个XMLHttpRequest实例
        var xhr = new XMLHttpRequest()
        2. //设置请求行open("get","url",false) 
        //open方法中有三个参数，参数一请求方式，参数二url地址，参数三设置同步异步(true异步，false 同步)
        xhr.open("get","https://www.baidu.com/?tn=58025142_9_oem_dg",false)
        //发送请求
        3.//监听服务器响应  onreadystatechange
        xhr.onreadystatechange=function(){
            console.log(xhr.readyState); //xhr状态  0 1 2 3 4
            /**
                0:请求未初始化
                1：服务器建立连接
                2：请求已经被接受
                3：请求正在处理中
                4.请求处理完成，相应已就绪
            **/
           console.log(xhr.status);//http状态码100,200,300,400,500
           if(xhr.readyState===4 && xhr.status===200){
               console.log(xhr.responseText);
           }
        }
        4.//发送请求
        xhr.send(null)

HTTP常见状态码

http状态码分类：

100-199 提示信息 - 表示请求正在处理
200-299 成功 -表示请求正常处理完毕
300-399 重定向 - 要完成请求必须进行更进一步的处理
400-499 客户端错误 - 请求有语法错误或请求无法实现
500-599 服务器端错误 - 服务器处理请求出错

常见的状态码有哪些？

200：请求成功，浏览器会把响应体内容(通常是html)显示在浏览器中；
404：(客户端问题)请求资源没有找到；
400：语义有误，当前请求无法被服务器理解；
401：当前请求需要用户验证；
403：服务器已经理解请求，但是拒绝执行它；
500：(服务端问题)请求资源找到了，但服务器内部发生了不可预期的错误；
301/302/303：(网站搬家了，跳转)重定向

同源和跨域

  /**
     * 同源:协议、域名、端口号 三者一致就是同源，如果有一个不一样就是非同源(跨域)
     * 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
     * 跨域:从一个域名去请求另外一个域名的资源，就是跨域请求。跨域时，浏览器不能执行其它域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制
     * 跨域就是不同源，只要协议、域名、端口有任何一个的不同，就被当做是跨域
  */    
  解决跨域问题的办法:
  1.JSONP
  在HTML标签里，一些标签比如script，img这样的获取资源的标签是没有跨域权限的。
  动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
  优点：兼容性好，简单易用，支持浏览器与服务器双向通信
  缺点：只支持GET请求
  2.CORS
  CORS是一个w3c标准，全称是“跨域资源共享(Cross-origin resource sharing)”,当一个请求url的协议，域名，端口三者之间任意与当前页面地址不同即为跨域，它允许浏览器向跨域服务器发送XMLHttpRequest请求，从而克服ajax只能同源使用的限制。
  原理:服务器对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。