文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

javascript中Ajax跨域的方法

2024-04-02 19:55

关注

本篇内容主要讲解“javascript中Ajax跨域的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中Ajax跨域的方法”吧!

ajax技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。

XMLHttpRequest 对象

Ajax 技术的核心是 XMLHttpRequest 对象(简称 XHR )

创建 XHR 对象

var xhr = new XMLHttpRequest();

XHR的用法 

要调用的第一个方法是 open() ,它接受 3 个参数:要发送的请求的类型("get" 、 "post" 等)、请求的 URL 和表示是否异步发送请求的布尔值。

xhr.open("get", "example.php", false);

xhr.send(null);

这里的 send() 方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入 null ,因为这个参数对有些浏览器来说是必需的。调用 send() 之后,请求就会被分派到服务器。

在收到响应后,响应的数据会自动填充 XHR 对象的属性,相关的属性简介如下。

responseText:作为响应主体被返回的文本。

responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的 XML DOM 文档。

status:响应的 HTTP 状态。

statusText:HTTP 状态的说明。

xhr.open("get", "example.txt", false); 

xhr.send(null); 

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 

 alert(xhr.responseText); 

} else { 

 alert("Request was unsuccessful: " + xhr.status); 

}

像前面这样发送同步请求当然没有问题,但多数情况下,我们还是要发送异步请求,才能让 JavaScript 继续执行而不必等待响应。此时,可以检测 XHR 对象的 readyState 属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

0:未初始化。尚未调用 open()方法。

1:启动。已经调用 open()方法,但尚未调用 send()方法。

2:发送。已经调用 send()方法,但尚未接收到响应。

3:接收。已经接收到部分响应数据。

4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

var xhr = createXHR(); 

xhr.onreadystatechange = function(){ 

 if (xhr.readyState == 4){ 

 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 

 alert(xhr.responseText); 

 } else { 

 alert("Request was unsuccessful: " + xhr.status); 

 } 

 } 

}; 

xhr.open("get", "example.txt", true); 

xhr.send(null);

function createXHR(){ 

 if (typeof XMLHttpRequest != "undefined"){ 

 return new XMLHttpRequest(); 

 } else if (typeof ActiveXObject != "undefined"){ 

 if (typeof arguments.callee.activeXString != "string"){ 

 var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", 

 "MSXML2.XMLHttp"], 

 i, len; 

 for (i=0,len=versions.length; i < len; i++){ 

 try { 

 new ActiveXObject(versions[i]); 

 arguments.callee.activeXString = versions[i]; 

 break; 

 } catch (ex){ 

 //跳过

 } 

 } 

 } 

 return new ActiveXObject(arguments.callee.activeXString); 

 } else { 

 throw new Error("No XHR object available."); 

 } 

}

到此,相信大家对“javascript中Ajax跨域的方法”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯