JQuery学习笔记 [Ajax] (6-1)

1). 传统的JavaScript方法实现Ajax功能

var objXmlHttp = null; //声明一个空的XMLHTTP变量


[code]        function CreateXMLHTTP() {

//根据浏览器的不同，返回该变量的实体对象

if (window.ActiveXObject) {

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

} else {

if (window.XMLHttpRequest) {

objXmlHttp = new XMLHttpRequest();

}

else {

alert("初始化XMLHTTP错误！");

}

}

}

function GetSendData() {

document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中...' src='Images/Loading.gif' />"; //初始化内容

var strSendUrl = "6-1b.html?date=" + Date(); //设置发送地址变量并赋初始值

CreateXMLHTTP(); //实例化XMLHttpRequest对象

objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest

objXmlHttp.onreadystatechange = function() { //回调事件函数

if (objXmlHttp.readyState == 4) { //如果请求完成加载

if (objXmlHttp.status == 200) { //如果响应已成功

//显示获取的数据

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

  }

}

}

objXmlHttp.send(null); //send发送设置的请求

}

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

6-1b.html:

<div class="clsShow">姓名：陶国荣<br />性别：男<br />邮箱：tao_guo1_rong@163.com</div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

2). load()方法实现Ajax功能

$(function() {


[code]            $("#Button1").click(function() { //按钮点击事件

$("#divTip").load("6-1b.html"); //load()方法加载数据

})

})

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

3). getJSON函数获取数据

$(function() {


[code]            $("#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); //显示处理后的数据

})

})

})

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

4). getScript函数获取数据

$(function() {


[code]            $("#Button1").click(function() { //按钮单击事件

//打开已获取返回数据的文件

$.getScript("UserInfo.js");

})

})

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

UserInfo.js:

var data = [


[code]{

"name": "陶国荣",

"sex": "男",

"email": "tao_guo_rong@163.com"

},

{

"name": "李建洲",

"sex": "女",

"email": "xiaoli@163.com"

}

];

var strHTML = ""; //初始化保存内容变量

$.each(data, function() { //遍历获取的数据

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

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

strHTML += "邮箱：" + this["email"] + "<hr>";

})

$("#divTip").html(strHTML); //显示处理后的数据

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

5). get实现异步获取xml文档数据

$(function() {


[code]            $("#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); //显示处理后的数据

})

})

})

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

UserInfo.xml:

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


[code]<Info>

<User id="1">

<name>陶国荣</name>

<sex>男</sex>

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

</User>

<User id="2">

<name>李建洲</name>

<sex>女</sex>

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

</User>

</Info>

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }