简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

原生JavaScript实现Ajax的方法

来源:易贤网   阅读:681 次  日期:2016-07-08 14:20:37

温馨提示:易贤网小编为您整理了“原生JavaScript实现Ajax的方法”,方便广大网友查阅!

首先为大家分享了原生JavaScript实现Ajax代码,供大家参考,具体内容如下

var getXmlHttpRequest = function() {

  if (window.XMLHttpRequest) {

    //主流浏览器提供了XMLHttpRequest对象

    return new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    //低版本的IE浏览器没有提供XMLHttpRequest对象

    //所以必须使用IE浏览器的特定实现ActiveXObject

    return new ActiveXObject("Microsoft.XMLHttpRequest");

  }

};

var xhr = getXmlHttpRequest();

xhr.onreadystatechange = function() {

  console.log(xhr.readyState);

  if (xhr.readyState === 3 && xhr.status === 200) {

    //获取成功后执行操作

    //数据在xhr.responseText

    console.log(xhr.responseText);

  }

};

xhr.open("get", "data.php", true);

xhr.send("");

下面和大家分享几种利用javascript实现原生ajax的方法。 

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: 

var xmlHttp; 

function createxmlHttpRequest() { 

if (window.ActiveXObject) { 

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

} else if (window.XMLHttpRequest) { 

xmlHttp=new XMLHttpRequest(); 

(1)下面使用上面创建的xmlHttp实现最简单的ajax get请求: 

function doGet(url){ 

// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 

createxmlHttpRequest(); 

xmlHttp.open("GET",url); 

xmlHttp.send(null); 

xmlHttp.onreadystatechange = function() { 

if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 

alert('success'); 

} else { 

alert('fail'); 

}

(2)使用上面创建的xmlHttp实现最简单的ajax post请求: 

function doPost(url,data){ 

// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 

createxmlHttpRequest(); 

xmlHttp.open("POST",url); 

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

xmlHttp.send(data); 

xmlHttp.onreadystatechange = function() { 

if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 

alert('success'); 

} else { 

alert('fail'); 

以上就是本文的全部内容,希望对大家的学习有所帮助。

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:关于cookie的初识和运用(js和jq)
下一篇:JavaScript数据推送Comet技术详解
易贤网手机网站地址:原生JavaScript实现Ajax的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!