AJAX 的简单实例 （JS实现 和JQuery 实现）

什么是AJAX

原生JS实现AJAX

HTML5 xmlhttprequest2

JQuery实现

跨域问题

parseJSON

什么是AJAX

Asynchronous Javascript And XML”（异步JavaScript和XML）

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

原生JS实现AJAX

function ajax() {

//先声明一个异步请求对象
var xmlHttpReg = null;
if (window.ActiveXObject) {//如果是IE

xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
}

//如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
if (xmlHttpReg != null) {
xmlHttpReg.open("get", "text.json", true);
xmlHttpReg.send(null);
xmlHttpReg.onreadystatechange = function () {
if (xmlHttpReg.readyState == 4) {//4代表执行完成

if (xmlHttpReg.status == 200) {//200代表执行成功
//将xmlHttpReg.responseText的值赋给ID为resTextdocument.getElementById("resText").innerHTML = xmlHttpReg.responseText;
alert();
}
}
}; //设置回调函数

}

//回调函数
//一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

//设定函数doResult()
function doResult() {

if (xmlHttpReg.readyState == 4) {//4代表执行完成

if (xmlHttpReg.status == 200) {//200代表执行成功
//将xmlHttpReg.responseText的值赋给ID为resTextdocument.getElementById("resText").innerHTML = xmlHttpReg.responseText;
alert();
}
}
}
}
}

HTML5 xmlhttprequest2

可以设置HTTP请求的时限。

可以使用FormData对象管理表单数据。

可以上传文件。

可以请求不同域名下的数据（跨域请求）。

可以获取服务器端的二进制数据。

可以获得数据传输的进度信息。

var xmlHttpRequest=new XMLHttpRequest();
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.responseType="text";
xmlHttpRequest.send("te111");
xmlHttpRequest.onload=function () {
if(this.status==200){
alert(this.responseText);
}
}

JQuery实现

1导入JQuery库

<script src="js/jquery.js"></script>

2

function getDataFormServer() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/0809/text.json",
dataType: "text",
success: function (data, textStatus) {
alert("success");
$("#myDiv").html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
,complete: function (jqXHR, status, responseText) {
alert("请求完成")
}
//            });

}

跨域问题

一般情况下 ajax是不能跨域请求的，

所谓的不能跨域请求就是自己的主机不能去请求别的主机内容的。

所以这里的例子都是 在自己的服务器上运行的。

$.parseJSON

将得到的JSon转换成对象。

success: function (data) {
var data = $.parseJSON(data);}

解析动态的添加到 html文档中

str = "<p>" + data.pName + "</p></div>";
$("#infos").append(str);