传统js代码和用jq实现ajax的比较

[b]传统js代码,传统的有助于理解原理[/b]

var xmlhttp;
function verify() {
var userName = document.getElementById("userName").value;
if (window.XMLHttpRequest) {
//针对Firefox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的Mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/html");
}
} else if (window.ActiveXObject) {
//针对IE6及以下版本
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个JS数组中
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try {
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e) {
}
}

}
//1.确认XMLHTTPRequest对象是否创建成功
if (!xmlhttp) {
alert("XMLHTTPRequest对象创建失败!!");
return;
} else {
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时,函数名不要加括号
xmlhttp.onreadystatechange = callback;

//3.设置连接信息
//第一个参数表示http的请求方式
//第二个参数是请求的URL地址
//第三个参数表示采用异步还是同步交互方式,trueb表示异步
//xmlhttp.open("GET", "AJAXServer?name=" + userName, true);

//post请求方式
xmlhttp.open("POST", "AJAXServer", true);
//post方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


//4.发送数据,开始和服务器端进行交互
//同步方式下,send这句话在服务器端数据返回来后才执行
//异步方式下,send这句话立即执行
//xmlhttp.send(null);
xmlhttp.send("name=" + userName);


}
function callback() {
//5.接受响应数据
//判断对象的状态是否交互完成
if (xmlhttp.readyState == 4) {
//判断http的交互是否成功
if (xmlhttp.status == 200) {
//获取服务器端返回的数据
var responseText = xmlhttp.responseText;
var resultNode = document.getElementById("result");
resultNode.innerHTML = responseText;
}
}
}


[b]用jquery实现的ajax[/b]

function verify() {
var userName = $("#userName").val();
//发送数据
$.get("AJAXServer?name=" + userName, null, function(data) {
$("#result").html(data);
});
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值