[b]传统js代码,传统的有助于理解原理[/b]
[b]用jquery实现的ajax[/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);
});
}