【转】Javascript原生Ajax请求

时间 2019-12-07

标签 javascript 原生 ajax 请求栏目 JavaScript 繁體版

原文原文链接

什么是 ajax
ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。
http 请求
首先须要了解 http 请求的方法（GET 和 POST）。
GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。
POST 用于上传数据。POST 安全性通常，容量几乎无限。
ajax 请求
ajax 请求通常分红 4 个步骤。
一、建立 ajax 对象
在建立对象时，有兼容问题：javascript

var oAjax = new XMLHttpRequest();   //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

合并上面的代码：html

1 var oAjax = null; 2 if(window.XMLHttpRequest){ 3     oAjax = new XMLHttpRequest(); 4 }else{ 5     oAjax = new ActiveXObject('Microsoft.XMLHTTP'); 6 }

二、链接服务器
在这里会用到 open() 方法。open() 方法有三个参数，第一个参数是链接方法即 GET 和 POST，第二个参数是 URL 即所要读取数据的地址，第三个参数是否异步，它是个布尔值，true 为异步，false 为同步。java

1 oAjax.open('GET', url, true);

三、发送请求
send() 方法。ajax

1 oAjax.send();

四、接收返回值
onreadystatechange 事件。当请求被发送到服务器时，咱们须要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState：请求状态，返回的是整数（0-4）。
0（未初始化）：尚未调用 open() 方法。
1（载入）：已调用 send() 方法，正在发送请求。
2（载入完成）：send() 方法完成，已收到所有响应内容。
3（解析）：正在解析响应内容。
4（完成）：响应内容解析完成，能够在客户端调用。
status：请求结果，返回 200 或者 404。
200 => 成功。
404 => 失败。
responseText：返回内容，即咱们所须要读取的数据。须要注意的是：responseText 返回的是字符串。安全

 1 oAjax.onreadystatechange=function(){  2     if(oAjax.readyState==4){  3         if(oAjax.status==200){  4  fnSucc(oAjax.responseText);  5         }else{  6             if(fnFaild){  7  fnFaild();  8  }  9  } 10  } 11 };

将以上代码进行封装：服务器

 1 function ajax(url, fnSucc, fnFaild){  2     //1.建立对象
 3     var oAjax = null;  4     if(window.XMLHttpRequest){  5         oAjax = new XMLHttpRequest();  6     }else{  7         oAjax = new ActiveXObject("Microsoft.XMLHTTP");  8  }  9       
10     //2.链接服务器 
11     oAjax.open('GET', url, true);   //open(方法, url, 是否异步)
12       
13     //3.发送请求 
14  oAjax.send(); 15       
16     //4.接收返回
17     oAjax.onreadystatechange = function(){  //OnReadyStateChange事件
18         if(oAjax.readyState == 4){  //4为完成
19             if(oAjax.status == 200){    //200为成功
20  fnSucc(oAjax.responseText) 21             }else{ 22                 if(fnFaild){ 23  fnFaild(); 24  } 25  } 26  } 27  }; 28 }

最后附上实例：异步

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax基础</title>
 6 </head>
 7 <body>
 8     点击按钮的时候，读取abc.txt<input id="btn" type="button" value="读取"/><br/>
 9     <div id="con"></div>
10 </body>
11 </html>
12 <script type="text/javascript" src="ajax.js"></script>
13 <script type="text/javascript">
14 window.onload = function(){ 15     var oBtn = document.getElementById('btn'); 16     var oCon = document.getElementById('con'); 17  oBtn.onclick = function(){ 18  ajax('abc.txt',function(str){ 19  oCon.innerHTML = str; 20  }); 21  } 22 } 23 </script>

abc.txt 内容：
这是ajax调用的内容1。
这是ajax调用的内容2。
这是ajax调用的内容3。url

来源： http://www.cnblogs.com/yjzhu/archive/2013/01/28/2879542.htmlspa