Ajax入门必知

原始的Ajax

1,创建XMLHttpRequest对象的实例

var xmlHttpReq;

if (window.ActiveXObject){

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

}

else if (window.XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest();

}

2.使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式 xmlHttpReq.open("GET"（http请求的方式）,"9-2.html（请求的URL） ",True（是否为异步方式）);

3.使用open()方法指定了请求后，还要用send()方法将请求发送出去
xmlHttpReq.send(null);

4.使用onreadystatechange事件监听服务器

用send()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。

这时需要用事件监听机制来捕获请求的状态，onreadystatechange事件实现这一功能。

xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack(){ if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById("target").innerHTML = xmlHttpReq.responseText;

}

}

1.onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理。
readyState有五种可取值（0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕）
status属性表明请求是否已经成功，如果status属性值为200表明一切正常，服务器已成功接收了客户端的请求

2.服务器在收到客户端的请求后，根据请求返回相应的内容。 文本形式: 存储在responseText中， XML格式: 存储在responseXML中。
它们都是只读属性，只有当readyState属性值为4的时候，才能通过它们获取完整的响应信息。
如果设置服务器端响应内容类型为Response.ContentType="text/xml"，responseXML才会有值并被解析成一个XML文档。

XMLHttpRequest对象

1 XMLHttpRequest对象虽然名称中含有XML，但它并不限于和XML文档一起使用，它可以接收任何形式的文本文档，如HTML文档、JSON文档、XML文档等。
2 XMLHttpRequest对象与PHP中的Request对象的功能也完全不同，Request对象是服务器端的对象，它的作用是获取从客户端发送来的数据；而XMLHttpRequest对象是位于客户端浏览器中的对象，它的作用是发送数据给服务器后再从服务器获取传回来的数据

5.发送数据给服务器

Get方式
xmlhttp.open("get","9-3.php?user=tang&n=" + Math.random());


Post方式
xmlhttp.open("post","9-3.php");
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("username="+user+ "&n=" + Math.random());

JqueyAjax

使用load方法(只用于 HTML载入)

载入HTML文档

load()方法能载入远程HTML文档并将其插入到指定的DOM元素中。它的语法为 load( url [,data ] [,callback])

vfunction Ajax(){ $(“#target”).load( “9-5.html .title”); // URL和选择器之间必须有一个空格
}
<input type="button" value="Ajax载入" onclick="Ajax();"/>
<div id="target"></div>

发送数据给服务器

function Ajax(){$("#target")

.load("9-6.php?

user=张三&comment=很好"//---以GET方式发送

,{nick:"rain",age:22}) } //---以POST方式发送

使用get()方法

function Ajax(){
$.get(“9-11.php”,{user:$(“#user”).val(),comment:$(“#comment”).val()},

function(data){ $("#target").append(data);
});
}

使用$.post()方法

$.post("9-11.asp",{user:$("#user").val(),comment:$("#comment").val()},function(data){ $("#target").append(data);});
服务器端程序可以用Request集合获取数据
<% user=request.Form("user") comment=request.Form("comment") response.Write "<h3>评论人"&user&"</h3>“ %>

1 GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，用户看不到这种区别

2 GET方式对传输的数据有大小限制，通常不能超过2KB，而使用POST方式传递的数据量要比GET方式大得多，理论上没有限制。

3 GET方式请求的数据会被浏览器缓存起来，而POST方式请求的数据不会被浏览器缓存

4 通过GET方式和POST方式传递给服务器端的数据，服务器端需要采用不同的方式获取，

使用$.ajax()方法

$.ajax()方法是jQuery中最底层的Ajax实现，load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构造的，它的语法为：
$.ajax(options)
示例：
$.ajax({ type: “GET”, //设置请求方式 url: “9-8.js”, //设置请求的URL dataType: “script” //设置返回数据的类型 })

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!