1、ajax是什么
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
2、ajax基础
XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
2.1 XHR对象创建
function getXhr(){
var xhr;
// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
xhr =new XMLHttpRequest();
}else{
xhr =new ActiveXObject("Microsoft.XMLHTTP");;
}
return xhr;
}
2.2 XHR 请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。
xhr.open(method,url,async,userName,pwd);
xhr.send(data);
（1）open方法
| open方法参数 | 说明 |
|---|---|
| method | 请求方法，put get post delete。 |
| url | 服务器资源的路径 |
| async | true（异步）或 false（同步） |
| userName | http认证需要的用户名 |
| pwd | http认证需要的密码 |
（2）send方法
send 方法，真正执行发送请求，data表示发送数据。
** （3）setRequestHeader(String key,String value) **
设置HTTP请求中的指定头部header的值为value.此方法需在open方法以后调用。
2.3 XHR 响应
**（1）onreadystatechange **
一个函数，当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
（2）readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
| 属性值 | 说明 |
|---|---|
| 0 | 请求未初始化 |
| 1 | 服务器连接已建立 |
| 2 | 请求已接收 |
| 3 | 请求处理中 |
| 4 | 请求已完成，且响应已就绪 |
（3）status
http协议响应的状态代码。可参考 http://www.jianshu.com/p/0726627f3907
（4）statusText
服务器返回状态的文本信息。
（5）getAllResponseHeaders()
返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔。注意：只能拿到限制以外（即被视为safe）的header字段，而不是全部字段。
（6） getResponseHeader(String header)
返回HTTP响应头中指定的键名header对应的值。注意：只能拿到限制以外（即被视为safe）的header字段，而不是全部字段。
（7）响应数据
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得XML形式的响应数据。 |
3、完整代码
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax 请求</title>
<script type="text/javascript">
function getXhr(){
var xhr;
// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
xhr =new XMLHttpRequest();
}else{
xhr =new ActiveXObject("Microsoft.XMLHTTP");;
}
return xhr;
}
function ajax(method,url,async,data,callback){
var xhr = getXhr();
xhr.open(method,url,async);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
callback(xhr.responseText,xhr);
}
}
if(data){
xhr.send(data);
}else{
xhr.send();
}
}
/*注意该URL需要支持跨域或者与JS处在相同的域*/
var url = "http://127.0.0.1:8080";
var async = true;
ajax('get',url,async,null,function(data,xhr){
alert("status="+xhr.status);
alert("statusText="+xhr.statusText);
alert("responseText="+data);
var allHeaders = xhr.getAllResponseHeaders();
alert("getAllResponseHeaders="+allHeaders);
var contentType = xhr.getResponseHeader("Content-Language");
alert("getResponseHeader('Content-Language')="+contentType);
});
alert(async?"异步":" 同步");
</script>
</head>
<body>
</body>
</html>
node js 后端代码：
//调用http模块
var http = require('http');
var server = http.createServer(function (request, response) {
response.setHeader('Access-Control-Allow-Origin' ,'*');
response.setHeader('Access-Control-Allow-Methods'
,'GET, POST,PUT,DELETE, OPTIONS');
response.setHeader('Access-Control-Allow-Headers' ,'token');
response.writeHead(200, {
'Content-Type': 'text/plain',
'Content-Language': 'zh_CN'
});
response.write("{'data':'data-json'}");
response.end();
});
server.listen(8080);
//打印日志
console.log('Http server is started. http://127.0.0.1:8080');
4、常见错误
No 'Access-Control-Allow-Origin' header is present on the requested resource.
服务器端不支持跨域。跨域支持参考 http://www.jianshu.com/p/b83094c81ca9
网友评论