ajax学习笔记
1 定义与理论
- Asynchronous JavaScript and XML(异步的 JavaScript 和 XML);
- ajax是一种标准;
- ajax与浏览器无关;
- ajax无需重新加载整个页面就可与服务器数据交换,以改变页面数据,对页面某部分进行更新;
- ajax不需要任何插件;
- XMLHttpRequest对象用于和服务器交换数据;
- 写在 < script > 里;
2 创建XMLHttpRequest
- IE5、IE6用的是ActiveXObject
variable = new ActiveXObject("Microsoft.XMLHTTP");
- 现代浏览器与IE7+使用的是XMLHttpRequest
variable = new XMLHttpRequest();
所以,在实际应用中,要先判断当前浏览器是支持哪一个对象。如果支持XMLHttpRequest对象,就创建,否则创建ActiveXObject。
<html>
<script>
variable = xmlhttp;
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else{
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTP");
}
</script>
</html>
3. XMLHttpRequest 对象的属性
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(名),当== readyState 发生改变,调用此函数== |
readyState | 存 XMLHttpRequest 状态信息(0-4) 0 :请求未初始化 1:已建立服务器连接 2:请求已接收 3:请求已处理 4:请求已完成 且 响应已就绪 |
status | 200: “OK” 404: 未找到页面 |
- readyState == 4 且 status == 200 时响应就绪。
- onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。
回调函数
- 是一种以参数形式传递给另一个函数的函数。
- 如果网站上存在多个 AJAX 任务,为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
- 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
4. 请求
4.1 发送请求:open(),send()
方法 | 描述 |
---|---|
open(method,url,async) xmlhttp.open(“GET”,“ajax_info.text”,true); | 规定请求类型、URL和是否异步处理请求 method : 请求类型,GET or POST url : 文件在服务器上的位置,可以为任何类型 async : 异步(true) or 同步(false) |
send(string) xmlhttp.send(); | 将请求发送到服务器 string : 仅用于POST请求 |
4.2 POST 与 GET
4.2.1 POST
- POST无数据量限制(向服务器发送大量数据时)
- 可以更新服务器上的文件与数据(当数据缓存无法使用时)
- 比GET更稳定、可靠(发送包含未知字符的用户输入时)
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
//发送返回内容时
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=张&lname=three");//返回 你好,张three,今天过得怎么样?
方法 | 描述 |
---|---|
setRequestHeader(header,value) | 向请求添加HTTP头 header : 规定头的名称 value : 规定头的值 |
4.2.2 GET
open("GET","url",true);//可能得到的是缓存结果
send();
//避免得到缓存结果,向每个请求添加ID
open("GET","url?t="+Math.Random(),true);
send();
//如需发送信息,则向URL添加信息
open("GET","url?fname=张&lname=three",true);
send();
4.3 同步、异步
-
异步
-
1.通过ajax,JS可以在等待服务器响应时执行其他文件
2.在响应就绪后执行其他文件
3.onreadystatechange() :当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","url",true);
xmlhttp.send();
-
同步
-
1.JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
2.使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
5. 服务器响应
5.1 获得服务器响应需要用到 XMLHttpRquest 对象的两个属性 reponseText 和 reponseXML 。
属性 | 描述 | 代码 |
---|---|---|
reponseText | 获取字符串形式的响应数据 | document.getElementByID(" 元素所在ID名").innerHTML = xmlhttp.reponseText; |
reponseXML | 获取XML形式的响应数据(需要解析) | 见示例 |
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//解析xml
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;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>
</body>
</html>
5.2 AJAX 创造动态性更强的应用程序
showHint()函数
网页如何与web服务器进行通信:(asp/php)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
var xmlhttp;
//01.判断输入框内容
if (str.length==0)//有时候或者是 str.length==""
{
document.getElementById("txtHint").innerHTML="";
return;
}
//02.创建XMLHttpRequest对象
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
}
//03.当服务器响应就绪时执行函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//04.把请求发送到服务器上的文件
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
//向url添加了q (带有输入框的内容)+ 输入内容str
xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
<!-- 将输入内容一起传入 -->
</form>
<p>提示信息: <span id="txtHint"></span></p>
</body>
</html>
5.3 AJAX 与 数据库 进行动态通信
showCustomer()函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
var xmlhttp;
//01.检查是否已选择某个客户
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
//02.创建XMLHttpRequest对象
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//03.当服务器响应就绪时执行函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//04.把请求发送到服务器上的文件
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
//向url添加了q (带有输入域的内容)
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>
</body>
</html>
5.4 AJAX 与 XML 文件进行交互式通信
loadXMLDoc() 函数
- 当服务器响应就绪时,会构建一个 HTML 表格,
- 从 XML 文件中提取节点(元素),
- 最后使用 XML 数据 填充 id=“demo” 的表格元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
</head>
<body>
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>