Ajax的核心是JavaScript的XMLHttpRequest对象，它是一种支持异步请求的技术。简而言之，使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应，
而不影响用户对页面的正常访问。对于XMLHttpRequest对象，不同的浏览器提供了不同的支持，IE是将其作为ActiveX控件集成到浏览器中的，而其他主流的浏览器直接
|
代码 |
说明 |
|
0 |
代表未初始化的状态。创建了一个XMLHttpRequest对象，尚未初始化 |
|
1 |
代表连接状态，已经调用了open方法，并且已经准备好发送请求 |
|
2 |
代表发送状态，已经调用了send方法发出请求，尚未得到响应结果 |
|
3 |
代表正在接收状态，已经接收了HTTP响应的头部信息，正在接收响应内容 |
|
4 |
代表已加载状态，此时响应内容已完全被接收 |
代码如下:
Ajax
ajax.js的内容：
代码如下:
var xmlRequest;
function CreateRequest()
{
/* 创建XMLHttpRequest对象 */
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}
function ResponseHandler()
{
if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
{
/* 如果通信成功，并且响应正常，执行以下操作 */ var reqContent = xmlRequest.responseText;
document.getElementById("browser").innerHTML = reqContent;
document.getElementById("content").value = reqContent;
}
}
function AjaxAccess()
{
/* 异步请求百度首页 */
xmlRequest = CreateRequest(); //创建XMLHttpRequest对象
xmlRequest.onreadystatechange = ResponseHandler; //设置回调函数
xmlRequest.open("GET","http://www.baidu.com"); //初始化请求对象
xmlRequest.send(null); //发送请求信息
/* 触发事件以后提示正在打开百度首页 */
var brow = document.getElementById("browser");
brow.innerHTML = "
正在打开百度搜索
";
}
window.onload = function()
{
document.getElementById("Access").onclick = AjaxAccess; //设置按扭单击事件
}
3：jQuery中的Ajax
$.ajax(options)方法
options是以“键/值”对的形式设置的，用于设置Ajax请求的参数，如请求方式、请求URL、回调函数等。
常用属性如下：
url: 发送请求的地址
type:请求方式，GET和POST，默认为GET
timeout: 设置请求超时时间，该属性为数值型，单位为毫秒
data: 发送到服务器的数据，“键/值”对形式，该属性可以是对象或者字符串，如果是对象，则自动转换为字符串
dataType: 预期服务器返回的数据类型，该属性为字符串类型。可选值如下： xml、html：返回纯文本HTML信息，包含的标签(script标签或者style标签)会在
文本插入DOM的时候执行、 script：返回纯文本JS代码、json、jsonp、text
contentType: 发送信息至服务器时内容编码类型，该属性为字符串类型，默认值为"application/x-www-form-urlencoded"，一般不用设置，因为默认值适合大多数应用场合
beforeSend: 请求发送前的事件，该属性为其设置事件处理程序，可用于发送前修改XMLHttpRequest的参数，如头信息。
代码如下:
function(XMLHttpRequest) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
complete: 请求完成后的事件，无论请求成功与否，都将触发该事件。
function(XMLHttpRequet, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
textStatus参数返回当前请求的执行状态(succss和error等)
success: 请求执行成功时的事件。
function(data, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
error: 请求执行失败时的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
global: 是否触发全局Ajax事件，该属性为Boolean类型，默认值为false
代码如下:
$(document).ready(function(){
$("#Access").click(function(){
var xmlReq = $.ajax({
type:'GET',
url:'http://www.sougou.com',
success:function(reqContent)
{
$("#browser").html(reqContent);
$("#content").text(reqContent);
}});
$("#browser").html("正在打开搜狗搜索
");
});
});
4：load方法
load(url, [data], [callback]);
代码如下:
Load
回复列表
Load.js
代码如下:
$(document).ready(function(){
$("#refresh").click(function(){
/* 要访问的页面URL，根据你实际情况做相应修改 */
var url = "http://www.sogou.com";
$("#commentList").load(url); //加载相应内容
});
});
5：$.get()方法
是一个全局方法，该方法使用GET方式来进行异步请求，语法格式如下：
代码如下:
var xmlReq = $.get(url, [data], [callback], [type]);
$.get("www.baidu.com",
{
user: 'zhangsan'
}
);
callback: function(data, textStatus) {}
代码如下:
Get
分类：
Get.js
代码如下:
$(document).ready(function(){
$("#Search").click(function(){ /* 使用Get方式请求指定URL */
$.get("http://localhost:2154/Web/BlogList.aspx",
{
key : $("#blogClass").val()
},
function(data){
$("#blogList").html(data);
});
});
$("#Search").click(); //触发一次单击事件
});
BlogList.aspx
代码如下:
<%@ Page Language="C#" %>
<%
/*
* 分别向数组里添加一些数据，
* 这些数据一般来自数据库，
* 这里只是模拟，就静态添加了
*/
string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
string[] blogTitle = { "CSS中的padding", "CSS入门", "C#中的类",
"C#基础知识", "C#面向对象", "C#设计模式" };
string key = Request["key"]; //获取请求服务器的关键字
/*
* 遍历数组集合
*/
for (int i = 0; i < blogClass.Length; i++)
{
/*
* 如果关键字为空，显示所有的记录
* 如果关键字等于分类名称，显示该分类下的记录
*/
if (key == null || key == string.Empty || key == blogClass[i])
{
%>
<%= blogClass[i]%><%= blogTitle[i]%>
<%
}
}
%>
6：$.post()方法
var xmlReq = $.post(url, [data], [callback], [type]);
$.get()方法是以GET方式提交的数据，所有的参数信息都将追加到URL后面，而Web请求一般对URL长度有一定，所以$.get()方法传递的数据长度也有一定的上限，
而$.post()方法是将参数作为消息的实体发送到服务器的，对数据无长度上的影响。
代码如下:
Post
用户登录
Username:
Password:
Post.js
代码如下:
$(document).ready(function(){
$("#submit").click(function(){
$.post("http://localhost:2154/Web/Login.aspx",
{
username : $("input[name='username']").val(),
password : $("input[name='password']").val()
},
function(data){
$("#login").html(data);
});
});
});
Login.aspx
代码如下:
<%@ Page Language="C#" %>
欢迎你 下载本文
