1.传统的JavaScript方法实现Ajax功能
var objXmlHttp = null;//声明一个空的XMLHTTP变量
function CreateXMLHTTP(){//根据浏览器的不同，返回该变量的实体对象
if(window.ActiveXObject){
objXmlHttp= new ActiveObject("Microsoft.XMLHTTP");
}else{
if(window.XMLHttpRequest){
objXmlHttp = new XMLHttpRequest();
}
else{
alert("初始化XMLHTTP错误！")；
}
}
}
function GetSendData(){
document.getElementById("divTip").innerHTML="<img alt='' titile='正在加载中...' src=“Images/Loading.gif”/>";//初始化内容
var strSendUrl ="b.html?date="+Date();//设置发送地址变量并赋初始值
createXMLHTTP();//实例化XMLHttpRequest对象
objXmlHttp.open("GET",strSendUrl,true);//open方法初始化xmlrequest
objXmlHttp.onreadyStatechange=function(){//回调事件函数
if(objXmlHttp.readyState==4){//如果请求完成加载
if(objXmlHttp.status==200){//如果响应已成功
document,getElementById("DivTip").innerHTML = objXmlHttp.responseText;
}
}
}
objXmlHttp.send(null);//send 发送设置的请求
}
2.load（）方法实现Ajax功能
$(function(){
$("#button1").click(function(){//按钮点击事件
$("#divTip").load("b.html");//load()方法加载数据
})
})
3.getJson函数获取数据
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数处理获取的数据
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strHTML += "姓名：" + Info["name"] + "<br>";
strHTML += "性别：" + Info["sex"] + "<br>";
strHTML += "邮箱：" + Info["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
4.getScript函数获取数据
$(function(){
$("#button1").click(function(){//按钮单击事件
$.getScript("UserInfo.js");
})
})
5.get实现异步获取xml文档数据
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数处理获取的数据
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(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() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
6.$.get发送请求
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.get("UserInfo.aspx",
{ name: encodeURI($("#txtName").val()) },
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
7.$.post发送请求
$(function(){
$("#button1").click(function(){//按钮单击事件
$.post("User_Info.aspx",// 打开文件，并通过回调函数返回服务器响应后的数据
{name:encodeURI($("#txtName").val()),
sex;encodeURI($("#selSex").val())
},
function(data){
$("#divTip")
.empty()// 先清空标记中的内容
.html(data);// 显示服务器返回的数据
})
})
})
8.serialize()序列化表单
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("User-Info.aspx",
$("#frmUserInfo").serialize(), //序列化表单数据
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
9.$.ajax()方法发送请求
$(function() {
$.ajax({ //请求登录页
url: "login.html", //登录静态页
dataType: "html",
success: function(HTML) { //返回页面内容
$("#frmUserLogin").html(HTML); //将页面内容置入表单
$("#btnLogin").click(function() { //“登录”按钮单击事件
//获取用户名称
var strTxtName = encodeURI($("#txtName").val());
//获取输入密码
var strTxtPass = encodeURI($("#txtPass").val());
//开始发送数据
$.ajax({ //请求登录处理页
url: "login.aspx", //登录处理页
dataType: "html",
//传送请求数据
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function(strValue) { //登录成功后返回的数据
//根据返回值进行状态显示
if (strValue == "True") {
$(".clsShow").html("操作提示，登录成功！");
}
else {
$("#divError").show().html("用户名或密码错误！");
}
}
})
})
}
})
})
10.$.ajaxSetup()方法全局设置Ajax
$(function() {
$.ajaxSetup({ //设置全局性的Ajax选项
type: "GET",
url: "UserInfo.xml",
dataType: "xml"
})
$("#Button1").click(function() { //"姓名”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "姓名", "name"); //显示"姓名"部分
}
})
})
$("#Button2").click(function() { //"性别”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "性别", "sex"); //显示"性别"部分
}
})
})
$("#Button3").click(function() { //"邮箱”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "邮箱", "email"); //显示"邮箱"部分
}
})
})
/*
*根据名称与值，获取请求响应数据中的某部分
*@Param d为请求响应后的数据
*@Param n为数据中文说明字符
*@Param d为数据在响应数据中的元素名称
*/
function ShowData(d, n, v) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(d).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
}
})
</script>
11.Ajax中的全局事件
$(function(){
//元素绑定全局事件
$("#divMsg").ajaxStart(function(){
$(this).show();
})
$(#divMsg).ajaxStop(function(){
$(this).html("已成功获取数据。")hide();
})
//按钮单击事件
$("#Button1").click(function(){
$.ajax(
type:"GET",
url:"GetData.aspx",
//获取加码后的数据并作为参数传给服务器
data:{txtData:encodeURI($("txtData").val()))},
dataType:"html",
success:function(data){
$("#divTip").html(decodeURI(data));
}
})
})
})
