Ajax入门必知

原始的Ajax

1,创建XMLHttpRequest对象的实例 

var xmlHttpReq;

if (window.ActiveXObject){

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

} 

else if (window.XMLHttpRequest){xmlHttpReq = new XMLHttpRequest();

}

2.使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式 xmlHttpReq.open("GET"（http请求的方式）, "9-2.html（请求的URL） ", True（是否为异步方式）);

3.使用open()方法指定了请求后，还要用send()方法将请求发送出去 
xmlHttpReq.send(null);

4.使用onreadystatechange事件监听服务器

用send()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。

这时需要用事件监听机制来捕获请求的状态，onreadystatechange事件实现这一功能。 

xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack(){if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)                        {

                                    document.getElementById("target").innerHTML = xmlHttpReq.responseText;

                 }  

                          }

1.onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理。
readyState有五种可取值（0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕）
status属性表明请求是否已经成功，如果status属性值为200表明一切正常，服务器已成功接收了客户端的请求 

2.服务器在收到客户端的请求后，根据请求返回相应的内容。 文本形式: 存储在responseText中， XML格式: 存储在responseXML中。
它们都是只读属性，只有当readyState属性值为4的时候，才能通过它们获取完整的响应信息。
如果设置服务器端响应内容类型为Response.ContentType="text/xml"，responseXML才会有值并被解析成一个XML文档。

XMLHttpRequest对象

1 XMLHttpRequest对象虽然名称中含有XML，但它并不限于和XML文档一起使用，它可以接收任何形式的文本文档，如HTML文档、JSON文档、XML文档等。
2 XMLHttpRequest对象与PHP中的Request对象的功能也完全不同，Request对象是服务器端的对象，它的作用是获取从客户端发送来的数据；而XMLHttpRequest对象是位于客户端浏览器中的对象，它的作用是发送数据给服务器后再从服务器获取传回来的数据 

5.发送数据给服务器

Get方式
xmlhttp.open("get","9-3.php?user=tang&n=" + Math.random());


Post方式
xmlhttp.open("post","9-3.php");
 xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("username="+user+ "&n=" + Math.random());

JqueyAjax

使用load方法(只用于 HTML载入)

载入HTML文档 

load()方法能载入远程HTML文档并将其插入到指定的DOM元素中。它的语法为 load( url [, data ] [, callback])

vfunction Ajax(){  $(“#target”).load(“9-5.html .title”);  // URL和选择器之间必须有一个空格
}
<input type="button" value="Ajax载入" onclick="Ajax();"/>
<div id="target"></div> 

发送数据给服务器

function Ajax(){$("#target")

        .load("9-6.php? 

            user=张三&comment=很好"//---以GET方式发送

            , {nick:"rain", age:22}) } //---以POST方式发送

使用get()方法

function Ajax(){
 $.get(“9-11.php”, {user:$(“#user”).val(), comment:$(“#comment”).val()},  

                function(data){ $("#target").append(data);
});
}

使用$.post()方法

$.post("9-11.asp", {user:$("#user").val(),comment:$("#comment").val()},function(data){ $("#target").append(data);});
服务器端程序可以用Request集合获取数据 
<% user=request.Form("user") comment=request.Form("comment") response.Write "<h3>评论人"&user&"</h3>“ %>

1GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，用户看不到这种区别

2 GET方式对传输的数据有大小限制，通常不能超过2KB，而使用POST方式传递的数据量要比GET方式大得多，理论上没有限制。

3 GET方式请求的数据会被浏览器缓存起来，而POST方式请求的数据不会被浏览器缓存

4 通过GET方式和POST方式传递给服务器端的数据，服务器端需要采用不同的方式获取， 

 使用$.ajax()方法

$.ajax()方法是jQuery中最底层的Ajax实现，load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构造的，它的语法为：
$.ajax(options) 
示例：
$.ajax({ type: “GET”,//设置请求方式 url: “9-8.js”,//设置请求的URL dataType: “script”//设置返回数据的类型 })

原始的Ajax vs Jquery Ajax