- // <-----Ajax----->
- function loadXMLDoc() {
- function success(text) {
- var textarea = document.getElementById(myid);
- textarea.value = text;
- }
- function fail(code) {
- var textarea = document.getElementById(myid);
- textarea.value = Error code: + code;
- }
- var request; // 创建 XMLHttpRequest 对象
- if(window.XMLHttpRequest) {
- request = new XMLHttpRequest(); // 兼容大多数浏览器
- }else {
- request = new ActiveXObject(Microsoft.XMLHTTP); // 兼容 IE5 IE6
- }
- request.onreadystatechange = function() { // 创建完 XMLHttpRequest 对象后, 先设置 onreadystatechange 回调函数
- // 判断响应结果
- if(request.readyState == 4) { // 通过 readyState===4 判断请求是否完成
- if(request.status == 200) { // 如果请求完成, 再根据 status===200 判断是否是一个成功的响应
- return success(request.responseText); // 成功, 通过 responseText 拿到响应的文本
- }else {
- return fail(request.status); // 失败, 根据响应码判断失败的原因
- }
- }else {
- //HTTP 请求还在继续
- }
- }
- request.open(Get,a_jax.txt,true); //XMLHttpRequest 的 open 方法有三个参数(GET/POST, 指定 URL 地址, 是否使用异步 默认为 true 可省略)
- request.send(); // 发送请求, GET 方法不需要参数; POST 方法需要把 body 部分以字符串或者 FormData 对象传进去
- console.log(请求已发送, 请等待相应);
- }
- // <----- 跨域 ----->
- // ajax 的 URL 使用的是相对路径, 由于浏览器的同源策略, 默认的情况下, JavaScript 在发送 Ajax 请求时, URL 的域名必须和当前页面完全一致即域名相同 (www.baidu.com 和 baidu.com) 协议相同 (http 和 https) 端口相同 (:80 和: 8080), 因此需要使用 JavaScript 请求外域(其他网站) 的 URL 跨域
- // 使用 JSONP 进行跨域, 它只能用 GET 请求, 这种跨域方式是利用浏览器允许跨域引用 JavaScript 资源
- // <script src="http://example.com/abc.js"><\/script>
- // JSONP 通常以函数调用的形式返回, 例如 JavaScript 内容为: foo(data); 这样一来, 如果在页面中先准备 foo()函数, 然后给页面动态加一个 < script > 节点, 相当于动态读取外域 JavaScript 资源最后就等着接收回调了
- // 例如: 对于 URL:http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice
- // 将会得到 refreshPrice({"0000001":{"code": "0000001", ... });
- // 因此需要首先在页面中准备好回调函数
- // function refreshPrice(data) {
- // var p = document.getElementById(test-jsonp);
- // p.innerhtml = 当前价格: +
- // data[0000001].name +: +
- // data[0000001].price + ; +
- // data[1399001].name + : +
- // data[1399001].price;
- // }
- // 最后用 getPrice()函数触发:
- // function getPrice() {
- // var
- // js = document.createElement(script),
- // head = document.getElementsByTagNage(head)[0];
- // js.src = http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice;
- // head.appendChild(js);
- // }
- // 完成跨域加载数据
- // 如果浏览器支持 HTML5, 可使用新的跨域策略 CORS
- </script>
- </head>
- <body>
- <div id="myid">Do Sth</div>
- <button type="button" onclick="loadXMLDoc()">Click it</button>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2518227.html