AJAX学习笔记 - 王朝网络

Ajax:Asynchronousjavascript Andxml.

AJAX不是新的编程语言，而是一种使用现有标准的新技术。AJAX是在不重新加载整个页面的情况下，与服务器交换数据并异步更新部分网页的艺术。

一、传统Javascript使用ajax方式：

xmlhttpRequest对象：所有现代浏览器均支持XMLHttPRequest对象，XMLHttpRequest用于在后台与服务器交换数据。

1）生成XMLHttpRequest对象：

objXmlHttp=newActiveXObject(activeKey[i]);if(objXmlHttp !=null)returnobjXmlHttp;

}catch(error) {thrownewError("您的浏览器版本过低，请更新浏览器");

}

}elseif(window.XMLHttpRequest) {

objXmlHttp=newXMLHttpRequest();

}returnobjXmlHttp;

}</script>

2）XMLHttpRequest对象向服务器发送请求：

objXmlHttp.open(method,url,async);

objXmlHttp.send();

method：请求的类型有GET货POST;

url:文件在服务器上的位置；

async:true（异步）或false(同步).

使用GET还是POST？

与post相比，get更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用post请求：

无法使用缓存文件（更新服务器上的文件或数据库）；

向服务器发送大量数据（post没有数据量的限制）；

发送包含未知字符的用户输入时，post比get更稳定可靠。

3）服务器响应：

如需获得来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXML属性。

例如：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");for(i=0;i<x.length;i++)

{

txt=txt + x[i].childNodes[0].nodeValue +"<br />";

}

document.getElementById("myDiv").innerHTML=txt;

4）客户端响应事件onreadystatechange

XMLHttpRequest对象的三个重要属性：

onreadystatechange:存储函数（或函数名），每当readystate属性改变时，就会调用该函数。

readystate：有5个状态，0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已完成，且响应已就绪。

status:有200：“OK”，404：未找到页面。

跟进javascript使用ajax的步骤编写一具体实例：

document.getElementById("divTip").innerHTML ="正在加载中";varstrSendUrl ="b.html?date="+Date();

CreateXMLHTTP();

objXmlHttp.open("GET", strSendUrl,true);

objXmlHttp.onreadystatechange=function () {if(objXmlHttp.readyState ==4) {if(objXmlHttp.status ==200) {

document.getElementById("divTip").innerHTML =objXmlHttp.responseText;

}

objXmlHttp.send(null);

}</script>

二、jQuery中ajax技术

1、jQuery下load方法

在jQuery中使用load方法可以轻松获取异步数据的功能，语法格式如下：

load(url,[data],[callback])

具体实例：

$("#Button2").click(function () {

$("#divTip2").load("b.html");

})

})</script>

2、getJSON方法

虽然load方法可以很快的加载数据到页面上，但是有时需要对获取的数据进行处理，如果将load方法获取的数据内容进行遍历，也可以进行数据的处理，但这样获取的内容必须先插入页面中，然后才能进行，因此它的执行效率不高。为了解决此问题，采用另一种较为轻量级的数据交互格式json文件格式。其调用语法格式为：

$.getJSON(url,[data],[callback])

具体调用实例：

首先创建一个.json格式的文件UserInfo.json:

[

{"name":"张三","sex":"男","email":"zhangsan@163.com"},

{"name":"李四","sex":"女","email":"lisi@163.com"}

]

使用getJSON方法进行调用：

$("#Button1").click(function () {

$.getJSON("UserInfo.json", function (data) {

$("#divTip").empty();varstrHtml ="";

$.each(data, function (infoIndex, info) {

strHtml+="姓名："+ info["name"] +"<br>";

strHtml+="性别："+ info["sex"] +"<br>";

strHtml+="邮箱："+ info["email"] +"<br>";

})

$("#divTip").html(strHtml);

})

})</script>

3、getScript方法

直接实例说明，创建一个文件UserInfo.js:

vardata =[

{"name":"张三","sex":"男","email":"zhangsan@163.com"},

{"name":"李四","sex":"女","email":"lisi@163.com"}

];varstrHtml ="";

$.each(data, function () {

strHtml+="姓名："+this["name"] +"<br>";

strHtml+="性别："+this["sex"] +"<br>";

strHtml+="邮箱："+this["email"] +"<br>";

})

$("#divTip").html(strHtml);

调用方法：

$("Button1").click(function () {

$.getScript("UserInfo.js");

})

})</script>

4、jQuery中异步加载xml文档

具体实例：创建一个UserInfo.xml文件

<?xml version="1.0"encoding="utf-8"?>

<Info>

<email>zhangsan@163.com</email>

</User>

</User>

</Info>

调用方法：

$("Button1").click(function () {

$.get("UserInfo.xml", function (data) {

$("#divTip").empty();varstrHtml ="";

$(data).find("User")

.each(function () {var$strUser = $(this);

strHtml+="姓名："+ $strUser.find("name").text() +"<br>";

strHtml+="性别："+ $strUser.find("sex").text() +"<br>";

strHtml+="邮箱："+ $strUser.find("email").text() +"<br>";

})

$("#divTip").html(strHtml);

})

})</script>

5、$.get()

jQuery中异步加载xml数据中使用$.get()函数，除此之外，$.get()函数还可以实现数据的请求。具体实例说明：

创建一个页面UserInfo.aspx:

<%@ Page Language="C#"ContentType="text/html"ResponseEncoding="gb2312"%>

<%stringstrName = System.Web.HttpUtility.UrlDecode(Request["name"]);stringstrHtml ="<div>";if(strName =="张三")

{

strHtml+="姓名：张三<br>";

strHtml+="性别：男<br>";

strHtml+="邮箱：zhangsan@163.com<br>";

}elseif(strName =="李四")

{

strHtml+="姓名：李四<br>";

strHtml+="性别：女<br>";

strHtml+="邮箱：lisi@163.com<br>";

}

strHtml+="</div>";

Response.Write(strHtml);%>

View Code

使用$.get()进行调用：

$("#Button1").click(function () {

$.get("UserInfo.aspx",

{ name: encodeURI($("#txtName").val()) },

function (data) {

$("#divTip")

.empty()

.html(data);

})

})</script>

6、$.post()

带参数向服务器发出数据请求，全局函数$.post()和$.get()在本质上没有太大的区别，不同的是Get方式不适合传递数据量较大的数据，同时get请求的历史信息也会保存在浏览器的缓存中，有一定的安全风险。而以post方式向服务器发送数据请求，则不存在这两个方面的不足。

具体实例：创建一个页面UserInfo2.aspx

<%@ Page Language="C#"ContentType="text/html"ResponseEncoding="gb2312"%>

<%stringstrName = System.Web.HttpUtility.UrlDecode(Request["name"]);stringstrSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);stringstrHtml ="<div>";if(strName =="张三"&& strSex =="男")

{

strHtml+="姓名：张三<br>";

strHtml+="性别：男<br>";

strHtml+="邮箱：zhangsan@163.com<br>";

}elseif(strName =="李四"&& strSex =="女")

{

strHtml+="姓名：李四<br>";

strHtml+="性别：女<br>";

strHtml+="邮箱：lisi@163.com<br>";

}

strHtml+="</div>";

Response.Write(strHtml);%>

View Code

使用$.post()进行调用：

$("#Button1").click(function () {

$.post("UserInfo2.aspx",

{ name: encodeURI($("#txtName").val()),

sex:encodeURI($("#selSex").val())

function (data) {

$("#divTip")

.empty()

.html(data);

})

})</script>

7、$.ajax()

$.ajax()方法是jQuery中最底层的方法，该方法不仅可以方便的完成$.get(),$.post()方法，还可以关注更多的细节。

首先列举一简单实例：

创建一页面：login.aspx

<%@ Page Language ="C#"ContentType="text/html"ResponseEncoding="gb2312"%>

<%stringstrName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);stringstrPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);boolisLogin =false;if(strName =="admin"&& strPass =="admin")

{

isLogin=true;

}

Response.Write(isLogin);%>

创建一前台界面：

<div>

<div>

</div>

使用$.ajax()方法进行调用：

$("#btnLogin").click(function () {varstrName = encodeURI($("#txtName").val());varstrPass = encodeURI($("#txtPass").val());

$.ajax({

url:"login.aspx",

dataType:"html",

data: { txtName: strName,

txtPass: strPass

success: function (strValue) {if(strValue =="True") {

$("#divError")

.show().html("操作提示，登录成功");

}else{

$("#divError")

.show().html("用户名或密码错误");

}

})

})</script>

$.ajax()方法中的参数有：url，type,data,dataType,beforeSend,complete,success,error,timeout,global,async,cache.它们所代表的具体意义，可以查些资料，此处就不一一赘述了。

$.ajaxSetup()设置全局Ajax。

8、ajax中全局事件：

ajaxComplete(callback),ajaxError,ajaxSend,ajaxStart,ajaxStop,ajaxSuccess.

ajax全局事件可以绑定在页面的任何一个元素中。实例：

$("#divTip").ajaxStart(function(){

$(this).html("正在处理中...") ;

})

9、综合运用：

此次介绍它和后台系统的交互过程。编写一个函数，其中使用ajax向后台传递数据，并从后台获取数据，并显示出来。testMethod5函数中，id为13，后台process方法得到id=13后，将字符串heightstr复制78，然后传递到前台testMethod函数中并显示出来。

前台函数testMethod5：

<scripttype="text/javascript">functiontestMethod5() {varid=13;varage=46;varaddress="china";

$.ajax({

type:"POST",

url:"Test.aspx/Process",

data: {"id": id,"age": age,"address": address

dataType:"json",

success:function(jsonData) {varresult=jsonData[0]["result"];if(result=="1") {vargetValue=jsonData[0]["height"];

alert(getValue);

}else{

alert("false");

}

});

}</script>

简单：

后台代码编写，其中使用反射技术完成ajax前后台交互。

namespaceOSCEWEB.UI

{publicpartialclassTest : System.Web.UI.Page

{privateconststringPAGE_PATH_INFO ="/UI/Test.aspx";//URL访问路径privateconststringASSEMBLY_NAME ="OSCEWEB";//程序集名称privateconststringCLASS_NAME ="OSCEWEB.UI.Test";//类名protectedvoidPage_Load(objectsender, EventArgs e)

{if(Request.Params["PATH_INFO"].StartsWith(PAGE_PATH_INFO +"/"))

{

Response.End();

}

}protectedoverridevoidOnInit(EventArgs e)

{stringpathInfo = Request.Params["PATH_INFO"];if(pathInfo.StartsWith(PAGE_PATH_INFO +"/"))

{string[] nameList = pathInfo.Substring(PAGE_PATH_INFO.Length +1).Split('/');if(nameList.Length <1)

{

Response.End();return;

}try{

Assembly assembly=Assembly.Load(ASSEMBLY_NAME);

Type type=assembly.GetType(CLASS_NAME);

MethodInfo method= type.GetMethod(nameList[0], System.Reflection.BindingFlags.NonPublic |System.Reflection.BindingFlags.Instance);

method.Invoke(this,null);

}catch(Exception ex)

{

Response.End();return;

}

}privatevoidProcess()

{stringidStr = Request.Form["id"];//从前台获取值intid =Convert.ToInt32(idStr);stringheightStr;if(id ==13)

{

heightStr="78";

}else{

heightStr="96";

}

StringBuilder jsonStringBuilder=newStringBuilder(string.Empty);

jsonStringBuilder.Append("[{");

jsonStringBuilder.Append("\"result\":\"1\",");

jsonStringBuilder.Append("\"height\":\""+ heightStr +"\"");//传递到前台jsonStringBuilder.Append("}]");

Response.Write(jsonStringBuilder .ToString ());

}

笔停此处，如有更深层次的理解，再行更新。