Ajax基础教程读书笔记

最新推荐文章于 2024-07-09 15:51:39 发布

husongs

最新推荐文章于 2024-07-09 15:51:39 发布

阅读量476

点赞数

文章标签： ajax xmlhttprequest 服务器 string callback 浏览器

本文链接：https://blog.csdn.net/husongs/article/details/1788496

版权

第一.XMLHttpRequest对象:
1.Sample:创建一个XMLHttpRequest对象的实例:

代码

var xmlHttp; //定义全局变量来保存对对象的引用
function createXMLHttpRequest(){
if(window.ActiveXObject){ //判断浏览器是否为IE
xmlHttp=new XMLHttpRequest("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){ //判断非IE的浏览器是否支持xmlhttprquest
xmlHttp=new XMLHttpRequest();
}
}
//IE浏览器肯定支持xmlhttprequest,因为其是存在于ActiveX中

2.Sample:
交互实例具体步骤:
1><input type="text" id="email" name="email" οnblur="validateEmail()">
2>创建XMLHttpRequest对象的一个实例:

代码

var xmlHttp;
function validateEmail(){
var email=document.getElementById("email");
var url="validate?email="+escape(email.value);
if(window.ActiveXObject){
xmlHttp=new XMLHttpRequest("Microsoft.XMLHttpRequest");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
xmlHttp.open("GET",url);
xmlHttp.onreadystatechange()=callback;
xmlHttp.send(null);
}

代码

function callback(){
if(xmlHttp.readystate==4){
if(xmlHttp.state==200){
//do sth in here.
}
}
}

3.GET与POST的区别:
GET:请求为幂等(多个请求返回相同的结果)时选用.会限制净荷的大小.(eg:URL的长度)
POST:当改变服务器上的状态时.不会限制净荷大小.
一般,可以用GET从服务器上取数据,但是要避免调用服务器上的状态.
如果选择的方法为POST,需要比GET多一步操作:设置XMLHttpRequest对象的首部:
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.DOM说明:
DOM是一个W3C规约,可以以一种独立于平台和语言的方式.DOM的设计是以对象管理组织(OMG)的规约为基础,因此可以用于任何语言.DOM实际上是以面向对象方式描述的面向对象模型.

第二,与服务器的通信:
1.XMLHttpRequest对象提供了两个处理服务器响应:1>responseText(将相应提供为一个串); 2>responseXML(将相应提供为一个XML对象)
2.利用HTML的innerHTML属性跟responseText结合使用,服务器就能"生产"出HTML内容,由浏览器利用innerHTML属性来"消费".
Sample:
innerHTML.html文件:

代码

<html>
<head>
<script type="text/javascript">
//第一步:定义XMLHttpRequest对象;
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new XMLHttpRequest("Microsoft.xmlHTTP");
}
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function startRequest(){
//第二步:调用刚才创建的实例对象;
createXMLHttpRequest();
//第三步:告诉XMLHttpRequest对象handleStateChange函数会处理XMLHttpRequest对象状态的改变,为此把对象的onreadyStatechange属性设置为指向JS函数的指针.
xmlHttp.onreadystatechange=handleStateChange;
//第四步:指定请求的属性
xmlHttp.open("GET","innerHTML.xml",true);
//第五步:将请求发送给服务器
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("results").<colorcolor=red>innerHTML</color>=xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
</form>
<div id="results"></div>
</body>
</html>

代码

<table border=1>
<trbody>
<tr>
<th>Active Name</th><th>Location</th><th>Time</th>
</tr>
<tr>
<td>watersking</td><td>Dock #</td><td>9:00 AM</td>
</tr>
<tr>
<td>Volleyball</td><td>East Count</td><td>11:00 AM</td>
</tr>
<tr>
<td>hikings</td><td>Trails 3</td><td>2:00 PM</td>
</tr>
</trbody>
</table>

husongs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础教程读书笔记

第一.XMLHttpRequest对象: 1.Sample:创建一个XMLHttpRequest对象的实例: 代码 var xmlHttp; //定义全局变量来保存对对象的引用 function createXMLHttpRequest(){ if(window.ActiveXObject){ //判断浏览器是否为IE
复制链接

扫一扫