[转]JS原生Ajax代码示例

文章来源：

JS原生Ajax和jQuery的Ajax与代码示例 -- 苏凯勇往直前

JS原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

1)创建Ajax引擎对象

2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3)绑定提交地址

4)发送请求

5)接受响应数据

     

     

function fn1() {

              //发送异步请求

              //1.创建ajax引擎对象----所有操作都是由ajax引擎完成

              if (window.XMLHttpRequest) {    // code for IE7+, Firefox, Chrome, Opera, Safari

                    xmlhttp = new XMLHttpRequest();

                } else {    // code for IE6, IE5

                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                }  

              //2.为引擎对象绑定监听事件

              xmlHttp.onreadystatechange = function() {

                     //当状态变化时处理的事情

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

                            //5.接收响应信息

                            var data = xmlHttp.responseText;

                            //alert(data);

                            document.getElementById("span1").innerHTML=data;

                     }

              }

              //3.绑定服务器地址

              //第一个参数：请求方式GET/POST

              //第二个参数：后台服务器地址

              //第三个参数：是否是异步 true--异步   false--同步

              xmlHttp.open("GET" ,  "${pageContext.request.contextPath}/ajaxServlet?username=zhangsan" , true);

              //4.发送请求

              xmlHttp.send();

       }

注意：接收响应信息应该在监听事件中完成，并且只有当readyState为4（即请求已处理完毕，响应已准备就绪），并且status为200（正常响应）时，方可处理响应信息。

注意：在JS原生Ajax中，也可以指定 如果是post提交

在发送请求之前设置一个头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

function fn1() {

              //发送异步请求

              //1.创建ajax引擎对象----所有操作都是由ajax引擎完成

 if (window.XMLHttpRequest) {    // code for IE7+, Firefox, Chrome, Opera, Safari

                    xmlhttp = new XMLHttpRequest();

                } else {    // code for IE6, IE5

                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                }  

              //2.为引擎对象绑定监听事件

              xmlHttp.onreadystatechange = function() {

                     //当状态变化时处理的事情

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

                            //5.接收响应信息

                            var data = xmlHttp.responseText;

                            //alert(data);

                            document.getElementById("span1").innerHTML=data;

                     }

              }

              //3.绑定服务器地址

              //第一个参数：请求方式GET/POST

              //第二个参数：后台服务器地址

              //第三个参数：是否是异步 true--异步   false--同步

              xmlHttp.open("POST" ,  "${pageContext.request.contextPath}/ajaxServlet" , true);

              //设置Content-type

              xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

              //4.发送请求

              xmlHttp.send("username=zhangsan" );

       }