传统js代码和用jq实现ajax的比较
<p>传统js代码,传统的有助于理解原理
var xmlhttp;
function verify() {
</p><div><div id="sina_keyword_ad_area2"><wbr /> <wbr /> <wbr /> var userName = document.getElementByIdx_x("userName").value;
<wbr /> <wbr /> <wbr /> if (window.XMLHttpRequest) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //针对Firefox,Mozillar,Opera,Safari,IE7,IE8
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> xmlhttp = new XMLHttpRequest();
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //针对某些特定版本的Mozillar浏览器的BUG进行修正
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> if (xmlhttp.overrideMimeType) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> xmlhttp.overrideMimeType("text/html");
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> }
<wbr /> <wbr /> <wbr /> } else if (window.ActiveXObject) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //针对IE6及以下版本
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个JS数组中
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> for (var i = 0; i < activexName.length; i++) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> try {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //取出一个控件名进行创建,如果创建成功就终止循环
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> xmlhttp = new ActiveXObject(activexName[i]);
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> break;
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> } catch(e) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> }
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> }
<wbr /> <wbr /> <wbr /> }<div style="page-break-after: always;"><span style="display: none;"><!--more-->& nbsp ;</span></div>
<wbr /> <wbr /> <wbr /> //1.确认XMLHTTPRequest对象是否创建成功
<wbr /> <wbr /> <wbr /> if (!xmlhttp) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> alert("XMLHTTPRequest对象创建失败!!");
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> return;
<wbr /> <wbr /> <wbr /> } else {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> alert(xmlhttp);
<wbr /> <wbr /> <wbr /> }
<wbr /> <wbr /> <wbr /> //2.注册回调函数
<wbr /> <wbr /> <wbr /> //注册回调函数时,函数名不要加括号
<wbr /> <wbr /> <wbr /> xmlhttp.onreadystatechange = callback;
<wbr /> <wbr /> <wbr /> //3.设置连接信息
<wbr /> <wbr /> <wbr /> //第一个参数表示http的请求方式
<wbr /> <wbr /> <wbr /> //第二个参数是请求的URL地址
<wbr /> <wbr /> <wbr /> //第三个参数表示采用异步还是同步交互方式,trueb表示异步
<wbr /> <wbr /> <wbr /> //xmlhttp.open("GET", "AJAXServer?name=" + userName, true);
<wbr /> <wbr /> <wbr /> //post请求方式
<wbr /> <wbr /> <wbr /> xmlhttp.open("POST", "AJAXServer", true);
<wbr /> <wbr /> <wbr /> //post方式需要自己设置http的请求头
<wbr /> <wbr /> <wbr /> xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
<wbr /> <wbr /> <wbr /> //4.发送数据,开始和服务器端进行交互
<wbr /> <wbr /> <wbr /> //同步方式下,send这句话在服务器端数据返回来后才执行
<wbr /> <wbr /> <wbr /> //异步方式下,send这句话立即执行
<wbr /> <wbr /> <wbr /> //xmlhttp.send(null);
<wbr /> <wbr /> <wbr /> xmlhttp.send("name=" + userName);
}
function callback() {
<wbr /> <wbr /> <wbr /> //5.接受响应数据
<wbr /> <wbr /> <wbr /> //判断对象的状态是否交互完成
<wbr /> <wbr /> <wbr /> if (xmlhttp.readyState == 4) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //判断http的交互是否成功
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> if (xmlhttp.status == 200) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> //获取服务器端返回的数据
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> var responseText = xmlhttp.responseText;
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> var resultNode = document.getElementByIdx_x("result");
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> resultNode.innerHTML = responseText;
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> }
<wbr /> <wbr /> <wbr /> }
}
用jquery实现的ajax
function verify() {
<wbr /> <wbr /> <wbr /> var userName = $("#userName").val();<br /> <wbr /> <wbr /> <wbr /> //发送数据<br /> <wbr /> <wbr /> <wbr /> $.get("AJAXServer?name=" + userName, null, function(data) {
<wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> <wbr /> $("#result").html(data);
<wbr /> <wbr /> <wbr /> });
}</div></div>