使用JavaScript实现ajax获取文本及html内容

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实例