1 //
2 functionloadXMLDoc() {3 functionsuccess(text) {4 var textarea = document.getElementById(‘myid‘);5 textarea.value =text;6 }7 functionfail(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 //
38 //JSONP通常以函数调用的形式返回,例如JavaScript内容为:foo(‘data‘); 这样一来,如果在页面中先准备foo()函数,然后给页面动态加一个节点,相当于动态读取外域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
61
62
63
64 Click it
65
66