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 IE616 ????}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，可使用新的跨域策略 CORS60 </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>Ajax异步网络请求及JSONP跨域
原文地址：https://www.cnblogs.com/zhengsblog/p/8520231.html