Ajax异步网络请求及JSONP跨域

 1 // <-----Ajax----->
 2 function loadXMLDoc() {
 3     function success(text) {
 4         var textarea = document.getElementById(‘myid‘);
 5         textarea.value = text;
 6     }
 7     function fail(code) {
 8         var textarea = document.getElementById(‘myid‘);
 9         textarea.value = ‘Error code: ‘ + code;
10     }
11     var request;  //创建XMLHttpRequest对象
12     if(window.XMLHttpRequest) {
13         request = new XMLHttpRequest();  //兼容大多数浏览器
14     }else {
15         request = new ActiveXObject(‘Microsoft.XMLHTTP‘);  //兼容IE5 IE6
16     }
17     request.onreadystatechange = function() {  //创建完XMLHttpRequest对象后,先设置onreadystatechange回调函数
18         //判断响应结果
19         if(request.readyState == 4) {  //通过readyState===4判断请求是否完成
20             if(request.status == 200) {  //如果请求完成,再根据status===200判断是否是一个成功的响应
21                 return success(request.responseText);  //成功,通过responseText拿到响应的文本
22             }else {
23                 return fail(request.status);  //失败,根据响应码判断失败的原因
24             }
25         }else {
26             //HTTP请求还在继续。。。
27         }
28     }
29     request.open(‘Get‘,‘a_jax.txt‘,true);  //XMLHttpRequest的open方法有三个参数(‘GET/POST’,‘指定URL地址’,是否使用异步 默认为true 可省略)
30     request.send();  //发送请求,GET方法不需要参数;POST方法需要把body部分以字符串或者FormData对象传进去
31     console.log(‘请求已发送,请等待相应‘);
32 }
33
34 // <-----跨域----->
35 // ajax的URL使用的是相对路径,由于浏览器的同源策略,默认的情况下,JavaScript在发送Ajax请求时,URL的域名必须和当前页面完全一致。即域名相同(www.baidu.com和baidu.com)、协议相同(http和https)、端口相同(:80和:8080),因此需要使用JavaScript请求外域(其他网站)的URL跨域。
36 // 使用JSONP进行跨域,它只能用GET请求,这种跨域方式是利用浏览器允许跨域引用JavaScript资源
37     // <script src="http://example.com/abc.js"><\/script>
38 // JSONP通常以函数调用的形式返回,例如JavaScript内容为:foo(‘data‘);  这样一来,如果在页面中先准备foo()函数,然后给页面动态加一个<script>节点,相当于动态读取外域JavaScript资源最后就等着接收回调了。
39     // 例如:对于URL:http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice
40 // 将会得到  refreshPrice({"0000001":{"code": "0000001", ... });
41 // 因此需要首先在页面中准备好回调函数
42 // function refreshPrice(data) {
43 //     var p = document.getElementById(‘test-jsonp‘);
44 //     p.innerHtML = ‘当前价格:‘ +
45 //         data[‘0000001‘].name +‘: ‘ +
46 //         data[‘0000001‘].price + ‘;‘ +
47 //         data[‘1399001‘].name + ‘: ‘ +
48 //         data[‘1399001‘].price;
49 // }
50 // 最后用getPrice()函数触发:
51 // function getPrice() {
52 //     var
53 //     js = document.createElement(‘script‘),
54 //     head = document.getElementsByTagNage(‘head‘)[0];
55 //     js.src = ‘http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice‘;
56 //     head.appendChild(js);
57 // }
58 // 完成跨域加载数据
59 // 如果浏览器支持HTML5,可使用新的跨域策略 CORS
60 </script>
61 </head>
62 <body>
63     <div id="myid">Do Sth</div>
64     <button type="button" onclick="loadXMLDoc()">Click it</button>
65 </body>
66 </html>

原文地址:https://www.cnblogs.com/zhengsblog/p/8520231.html

时间: 2024-10-10 02:36:24

Ajax异步网络请求及JSONP跨域的相关文章

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm,下面给出例子: 一.客户端 Html代码   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信息如下: CORS概念 支持CORS请求的浏览器一旦发现ajax请求跨域,会对请求做一些特殊处理,对于已经实现CORS接口的服务端,接受请求,并做出回应. 有一种情况比较特殊,如果我们发送的跨域请求为"非简单请求",浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的"

jquery ajax jsonp跨域调用实例代码

今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html P

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.WebForm使用母版页进行登录时候的验证 //新建一个页面父类 public abstract class BasePage:Page { protected void Page_Load(object sender, EventArgs e) { //1.身份验证的方法 Session if (Se

JSONP跨域请求数据报错 “Unexpected token :”的解决办法

原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确 本地虚拟两个域名,分别为:www.test.com.www.abc.com http://www.test.com/index.html页面点击按钮,请求返回 www.abc.com域名目录下的文件的数据 ,其代码为: <!DOCT

jQuery jsonp跨域请求详解

跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端. 这里讲下使用jquery的jsonp如何发起跨域请求及其原理. 先看下准备环境:两个端口不一样,构成跨域请求的条件. 获取数据:获取数据

轻松搞定JSONP跨域请求

一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的.例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口数据.这里我们以搜索图书为例,参数链接为:https:

jQuery jsonp跨域请求

跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端. 这里讲下使用jquery的jsonp如何发起跨域请求及其原理. 先看下准备环境:两个端口不一样,构成跨域请求的条件. 获取数据:获取数据