在Jquery实现Ajax和JS实现Ajax的方法

来源：互联网发布：mac输入法记忆编辑：程序博客网时间：2024/06/04 18:20

在Jquery实现Ajax和JS实现Ajax的方法

一在Jquery实现Ajax:

在head标签里：

<head>
①导入js的jar文件
<script type="text/javascript" src="./MyJs.js"></script>

<script type="text/javascript">
//js的封装、 js的捆绑 - input.onblur ---> jquery
网页打开就加载
window.onload = function() {
②拿到相应的标签名：
var uname = $
{
"uname"
}
③标签名绑定onblur事件
uname.bind("onblur", function() {
④调用Jquery里面的ajax函数
uname.ajax( {
⑤设置url超链接
url : "./registerAction.action?uname=" + uname.val() + "&r="
+ Math.random(),//uname.val()拿到标签元素的值，跟上随机数Math.random()
⑥返回调用一个success函数，拿到后台传回来的数据
success : function(msg) {
拿到后台传回来的数据
var o = eval(msg);
⑦满足条件执行的方法
if () {
} else {
⑧不满足条件执行的方
}
}
});
});

}
</script>

</head>

二在js里实现ajax的方法

<head>
<script type="text/javascript">

//1创建一个Ajax的XMLHttpRequest()请求

function createXMLHttpRequest() {
var xhr = null;
if (document.all) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xhr = new XMLHttpRequest();
}
return xhr;
}

//2执行方法
function checkName() {

var loginName = document.getElementById("loginName").value;

// 3调用createXMLHttpRequest()方法

var xhr = createXMLHttpRequest();
//准备开始
xhr.onreadystatechange = function() {
//6看返回是否满足服务器条件
if (xhr.readyState == 4 && xhr.status == 200) {
var msg = xhr.responseText ;

// 6通过json方式把后台拿到的参数装到eval中
var o = eval(msg);

//7显示返回信息
document.getElementById("span").innerHTML = msg;
}
}
//4.打开open(提交方式,请求链接,异步true/同步false)
var url = "registerget?name=" + loginName + "&r=" + Math.random();

第一种get的提交方式：

//设置提交方式
xhr.open("get", url, true);

//5.发送请求
xhr.send(null);
第二种post的提交方式：

xhr.open("post",url,true);

//发送请求post多这一句

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

xhr.send("name="+name+"&r="+Math.random());

}
</script>

</head>

0 0