标签：style blog http java color strong
什么是 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
【转】Javascript原生Ajax请求,布布扣,bubuko.com
标签：style blog http java color strong
原文地址：http://www.cnblogs.com/kuler/p/3820454.html
