首页 > 代码库 > 【转】Javascript原生Ajax请求

【转】Javascript原生Ajax请求

2024-07-10 14:30:29   225人阅读

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

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

合并上面的代码：

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

 

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

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


3、发送请求
send() 方法。

1 oAjax.send();


4、接收返回值
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。

 

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


联系
我们