您的位置：首页 > Web前端 > JQuery

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

2015-11-21 22:18 573 查看

在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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航