ajax使用jQuery的话很容易就可以实现了,但是使用原生JavaScript要如何实现呢,原生JavaScript提供了XMLHttpRequest,通过它即可实现ajax了。获取文本可以直接输出结果即可,获取html文本,必须使用innerHTML才能正常显示html相关标签及内容、样式。当然,我们要是直接使用jQurey的$ajax()方法,很容易就能实现原生JavaScript要写很长代码的ajax功能。当然jQurey库都是使用原生JavaScript编写并封装的,因此他们是完全分不开的。下面我们来看看JavaScript原生是如何实现ajax功能!
1、JavaScript通过ajax获取内容
window.onload = function () {
//1.获得ID元素(此ID对应的是一个a链接元素),为其添加onclick响应函数
document.getElementById("TextAjax").onclick = function () {
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据:url
var url = this.href;
//5.设置请求模式 post、get方法
var method = "GET";
//6.调用XMLHttpRequest 对象的open方法
request.open(method,url);
//7.调用XMLHttpRequest 对象的send方法
request.send(null);
//8.为XMLHttpRequest 对象添加onreadystatechange响应函数
request.onreadystatechange = function () {
//9.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4的时候
if (request.readyState == 4){
//10.再判断响应是否可用:XMLHttpRequest对象的status属性值为200
if(request.status == 200 || request.status ==304){
//alert(request.responseText);//打印响应结果responseText(text、html内容)
//document.write(request.responseText);//打印响应结果responseText(text内容)
//打印响应结果responseText(html内容)
document.getElementById("Ajax1").innerHTML = request.responseText;
}
}
};
//2.取消当前a节点的默认行为
return false;
};
2、demo演示地址
原生JavaScript实现ajax实例