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>

 

posted @ 2018-03-07 02:56  spksth  阅读(220)  评论(0)    收藏  举报