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

jQuery实现Ajax异步

2017-07-21 23:34 267 查看
jQuery中的ajax方法

jQuery中的get方法

原生javaScript实现Ajax

jQuery中的$.ajax()方法

参数:

async:是否异步,默认true 代表异步

data:发送到服务器的参数,建议使用Json格式

dataType:服务器返回的数据类型,常用text和Json

success:成功响应执行的函数,对应的类型微function类型

type:请求方式,post/get

url:请求服务器端的地址

function fn1() {
$.ajax({
async: true,
dataType: "text",
success: function (data) {
document.getElementById("tis").innerHTML = data;
},
error:function () {
alert("请求失败!")
},
type: "post",
url: "/ajaxServlet"
});
}


jQuery中的get()方法

get(url,[data],[callback],[type])

参数:

url:待载入页面的url

data:待发送的key/value参数

callback:载入成功时回调函数

type:返回内容格式(xml,html,json,text,script)

function fn1() {
$.get("/ajaxServlet",
function (data) {
document.getElementById("tis").innerHTML = data;
},"text"

);
}


原生javaScript实现Ajax

*function fn1() {
/!*1.创建Ajax引擎对象*!/
var xmlHttp = new XMLHttpRequest();
/!*2.绑定监听----监听服务器是否返回数据*!/
xmlHttp.onreadystatechange = function () {
/!*5.接受响应数据*!/

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var res = xmlHttp.responseText;
document.getElementById("tis").innerHTML=res;
}
}
/!*3.绑定地址*!/
xmlHttp.open("post", "/ajaxServlet", true);
/!*4.发送请求*!/
xmlHttp.send();

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: