AJAX 使用原生js实现ajax

 

一、什么是ajax?  异步的JavaScript和XML

        XHTML：可扩展的超文本标记语言

         ||

        HTML

xml:数据结构 可扩展的标记语言

json:轻量级的数据格式

    二、ajax使用的场景

        一、局部刷新

        二、表单验证 (最初的设计目的)

        三、无刷新动态获取数据

    三、ajax的优势

        一、效率高 用户体验好

        二、无刷新动态获取数据

    四、ajax请求数据的流程

        1，建立一个ajax对象 xhr

        2，打开地址

        3，发送

        4，等待数据         

       5，ajax的状态：  ajax的状态有哪些

                        0-未初始化，还没有调用open()方法

                        

                        1-启动，调用open()方法，已调用send()的方法，正在发送请求

                    

                        2-发送，已经调用send()方法，已接受到响应

                        3-解析 正在解析响应数据

                        四、完成，响应数据解析完成，客户端能够调用;（咱们都是使用xhr.readyState == 4 判断ajax请求是否结束）

        6，服务器的状态

        常见的服务器状态码有哪些？

            100——客户必须继续发出请求

            101——客户要求服务器根据请求转换HTTP协议版本

            200——交易成功

            201——提示知道新文件的URL

            202——接受和处理、但处理未完成

            203——返回信息不肯定或不完整

            204——请求收到，但返回信息为空

            205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

            206——服务器已经完成了部分用户的GET请求

            300——请求的资源可在多处获得

            301——删除请求数据

            302——在其余地址发现了请求数据

            303——建议客户访问其余URL或访问方式

            304——客户端已经执行了GET，但文件未变化

            305——请求的资源必须从服务器指定的地址获得

            306——前一版本HTTP中使用的代码，现行版本中再也不使用

            307——申明请求的资源临时性删除

            400——错误请求，如语法错误

            401——请求受权失败

            402——保留有效ChargeTo头响应

            403——请求不容许

            404——没有发现文件、查询或URl

            405——用户在Request-Line字段定义的方法不容许

            406——根据用户发送的Accept拖，请求资源不可访问

            407——相似401，用户必须首先在代理服务器上获得受权

            408——客户端没有在用户指定的饿时间内完成请求

            409——对当前资源状态，请求不能完成

            410——服务器上再也不有此资源且无进一步的参考地址

            411——服务器拒绝用户定义的Content-Length属性请求

            412——一个或多个请求头字段在当前请求中错误

            413——请求的资源大于服务器容许的大小

            414——请求的资源URL长于服务器容许的长度

            415——请求资源不支持请求项目格式

            416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

            417——服务器不知足请求Expect头字段指定的指望值，若是是代理服务器，多是下一级服务器不能知足请求

            500——服务器产生内部错误

            501——服务器不支持请求的函数

            502——服务器暂时不可用，有时是为了防止发生系统过载

            503——服务器过载或暂停维修

            504——关口过载，服务器使用另外一个关口或服务来响应用户，等待时间设定值较长

            505——服务器不支持或拒绝支请求头中指定的HTTP版本

            

            必需要记住的

                100：客户端必须发送请求

                200：请求成功

                304：重定向 (提问);

                404: 数据不存在

                500：服务器错误

五、ajax可否跨域？如何解决跨域？场景的跨域方式有哪些？

（1）不能

（2） 跨域:浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(由于a.cn和b.cn是不一样域),因此跨域就出现了.

同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

解决跨域的方式 A: 基于script标签实现跨域 B:基于jquery跨域 jquery已经把跨域封装到ajax上 jsonp形式的ajax请求:而且经过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求 C:经过iframe来跨子域

6, 

        get与post的区别

        一、上传获取数据

        二、get不安全 post安全 这样理解有点错误

                form Data

            取决于http协议和https协议

        get传递数据的时候经过url进行传递数据 在地址？后面进行传递数据

        类型 key = val 若是是传递多个值的时候 用&分割

        例如

            www.baidu.com?username=帅哥&age=34&sex=男

        get存储量的大小只有2K

        post传递数据的时候 虚拟的机制 setRequestHeader() send(数据)

（1）get的ajax

//第一步 建立ajax对象

var xhr = new XMLHttpRequest();

//第二步 打开要发送的地址

xhr.open("get","http://10.9.188.25/qbank/php/select.php");

/*

    参数1：method--->get post

    参数2：请求的地址

    参数3：布尔值 默认是false 异步true同步

*/

//第三部发送

xhr.send();

console.log(xhr.readyState)

//第四步

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 && xhr.status == 200){

        console.log(JSON.parse(xhr.responseText))

    }

}

 

（2）post的ajax

//第一步建立ajax对象

var xhr = new XMLHttpRequest();

//打开请求的方式

xhr.open("post","http://10.9.188.25/qbank/php/insert.php");

//若是是post进行提交的时候必须设置响应头

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

//post发送数据请求的时候参数要放在send里面

xhr.send("content=面向对象&where=this的指向&idea=多练");

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 && xhr.status == 200){

        console.log(JSON.parse(xhr.responseText))

    }else{

        console.log(xhr.status);

    }

}

（3）封装ajax

function ajax(options){

    //建立一个ajax对象

    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");

    //数据的处理 {a:1,b:2} a=1&b=2;

    var str = "";

    for(var key in options.data){

        str+="&"+key+"="+options.data[key];

    }

    str = str.slice(1)

    if(options.type == "get"){

        var url = options.url+"?"+str;

        xhr.open("get",url);

        xhr.send();

    }else if(options.type == "post"){

        xhr.open("post",options.url);

        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

        xhr.send(str)

    }

    //监听

    xhr.onreadystatechange = function(){

        //当请求成功的时候

        if(xhr.readyState == 4 && xhr.status == 200){

            var d = xhr.responseText;

            //将请求的数据传递给成功回调函数

            options.success&&options.success(d)

        }else if(xhr.status != 200){

            //当失败的时候将服务器的状态传递给失败的回调函数

            options.error&&options.error(xhr.status);

        }

    }

}

ajax({

    type:"get/post",

    url:"请求的地址",

    data:{},

    success:function(data){

        console.log(data)

    }

})

 

 

1，AJAX不是JavaScript的规范,  ajax的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求

注意：AJAX请求是异步执行的，也就是说，要经过回调函数得到响应。

2,使用原生js实现ajax
建立一个 XMLHttpRequest 对象。若是不支持建立该对象的浏览器，则须要建立 ActiveXObject，具体方法以下：
var xmlHttpRequest;
function createXmlHttpRequest(){
if(window.XMLHttpRequest)  //非IE
xmlHttpRequest = new XMLHttpRequest();
else if(window.ActiveObject)//IE6+
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
else//IE6-
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}
提交请求的方法：
open(method,url);//分别为提交的方法(GET或者POST)和提交的url
send(content);
onreadystatechange(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.state == 200){
//请求成功
}
}else{
//请求失败
}
}

 

当建立了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，一般咱们只需经过readyState === 4判断请求是否完成，若是已完成，再根据status === 200判断是不是一个成功的响应。

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET仍是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，因此不用写。

注意，千万不要把第三个参数指定为false，不然浏览器将中止响应，直到AJAX请求完成。若是这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

最后调用send()方法才真正发送请求。GET请求不须要参数，POST请求须要把body部分以字符串或者FormData对象传进去。