用javascript写原生ajax(笔记)

 

　　AJAX  的全名叫作  Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它最大的优势是在不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容，优化用户体验。平时本身使用 ajax 作请求都是用的 jquery 里封装好的 ajax 函数，下面用javascript来写一写原生的ajax请求。

（

　　插播一条ajax的知识点：

   

 

　      ajax请求头中特有的字段：X-Requested-With: XMLHttpRequest; 你能够在服务端经过这个字段来判断一个http请求是否为ajax请求。

）

大体分为如下四个步骤：

一、建立ajax对象 （考虑各个浏览器的兼容性）

二、链接到服务器

三、发送请求

四、接收返回值进行处理

 

<script> window.onload=function() { //由一个按钮来触发发送ajax请求的动做
    var btn = document.getElementById("btn"); btn .onclick = function() { //1.建立ajax对象，考虑浏览器的兼容性

        var xhr;    //ajax对象

        if(window.XMLHttpRequest) //若是有XMLHttpRequest，那就是非IE6版本如下的浏览器。
 { //建立ajax对象
            var xhr= new XMLHttpRequest(); } else
        //若是没有XMLHttpRequest，那就是IE6版本一下的浏览器
 { //IE6浏览器建立ajax对象
            var xhr= new ActiveXObject("Microsoft.XMLHTTP"); } //2.链接服务器 //open(方法、文件名、是否异步传输） //方法： //传输方式是get方式仍是post方式。 //文件名 //告诉服务器要读哪一个文件 //异步传输 //基本上都是用异步

        /*请求为GET方式*/
        /*GET请求方式会首先找浏览器中的缓存，加上t='+new Date().getTime()"的目的是为了消除缓存，每次的t的值不同。*/ xhr.open("GET","/quest?t='+new Date().getTime()",true); //3.发送请求
        /*POST请求时能够带参数，做为请求的参数*/ xhr.send(); //4.接收返回 //客户端和服务器端有交互的时候会调用onreadystatechange
        xhr.onreadystatechange=function() { //xhr.readyState //浏览器和服务器，进行到哪一步了。 //0->（未初始化）：尚未调用 open() 方法。 //1->（载入）：已调用 send() 方法，正在发送请求。 //2->（载入完成）：send() 方法完成，已收到所有响应内容。 //3->（解析）：正在解析响应内容。 //4->（完成）：响应内容解析完成，能够在客户端调用。
            if(xhr.readyState==4) { if(xhr.status==200)//判断是否成功,若是是200，就表明成功
 { alert("成功"+xhr.responseText); /*xhr.responseText 是服务器返回的文本信息*/ } else { alert("失败"); } } }; } }; </script>                  

 

以上就是简单的使用javascript写原生ajax请求的代码。

 

最后补充：ajax是不能进行跨域请求的，这也是局限性所在，若是想要进行跨域请求，可使用jsonp来实现，它利用的是请求js文件时能够进行跨域请求的原理。