1.原生ajax请求服务端txt文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <!-- <script src="myajax.js"></script> --> 6 <script> 7 window.onload= function(){ 8 var oBtn = document.getElementById("btn"); 9 oBtn.onclick = function(){ 10 //创建ajax对象 11 var xhr = null; 12 if(window.XMLHttpRequest) 13 { 14 xhr = new XMLHttpRequest();// w3c标准 15 } 16 else 17 { 18 xhr = new ActiveXObject("Microsoft.XMLHTTP");// IE 19 } 20 // 连接服务器 21 xhr.open('Get','ha.txt',true); 22 // 发送请求 23 xhr.send(); 24 // 接收返回 25 xhr.onreadystatechange = function(){ //onreadyStateChange事件是在readyState属性值发生改变时触发的 26 if(xhr.readyState == 4){ // readyState的值表示了当前请求的状态 27 if(xhr.status == 200){// Status存储了服务器端返回的Http请求响应代码 28 alert(xhr.responseText); 29 } 30 else{ 31 alert('failed'); 32 } 33 } 34 } 35 } 36 } 37 </script> 38 </head> 39 <body> 40 <input id="btn" type="button" value="read" /> 41 </body> 42 </html>
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status |
200: "OK" 404: 未找到页面 |
2.jsonp
-
什么是JSONP？
要了解JSONP，不得不提一下JSON，那么什么是JSON ？
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
-
JSONP有什么用？
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
-
如何使用JSONP？
在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。
-
JSONP的简单实例
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function jsonpCallback(data) {
for(var i in data) {
alert(i+":"+data[i]);//循环输出
}
}
var JSONP=document.createElement("script");
JSONP.src="service.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>
</head>
<body>
</body>
</html>
php代码
<?php header('Content-Type:application/json;charset=utf-8'); //服务端返回JSON数据 $arr=array('a'=>1,'b'=>2,'c'=>3); $result=json_encode($arr); //动态执行回调函数 $callback=$_GET['callback']; echo $callback."($result)"; ?>
-
JSONP的原理
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
参考文档：http://justcoding.iteye.com/blog/1366102