Ajax基础和基本跨域问题

本文章内容大部分摘自@姜维_Wayne 老师在imooc中的免费课程Ajax全接触
目的是作为一个课程的总结和Ajax知识的概览

AJAX

Asynchronous JavaScript and XML（异步的JS和XML）
是一种在无需重新加载整个网页的情况下能更新部分网页的技术。

Ajax异步

同步请求的一般流程

异步请求的一般流程
在表单填写的过程中就可以得到反馈，比如必须到服务器中查询的用户名是否重复

XHR
XMLHttpRequest 可扩展超文本传输请求
XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
实现局部刷新需要三点

1. 运用HTML和CSS来实现页面表达信息
2. 运用XMLHttpRequest和web服务器进行数据的异步交换
3. 运用js操作DOM，实现动态局部刷新

XMLHttpRequest 对象
ie浏览器5和6不支持

var request;

if(window.XMLHttpRequest){
	request = new XMLHttpRequest();  //ie 7+, firefox, chrome ,opera ,safari
}else{
	request = new ActiveXObject("Micsoft.XMLHTTP");//ie 5/6
}

什么是HTTP请求？
HyperText Transfer Protocol 是互联网上应用最为广泛的一种网络协议，是计算机通过网络进行通信的规则
是一种无状态的协议，服务端不保留链接的信息
一个完整的HTTP请求通常有7个步骤

1. 建立TCP链接
2. 浏览器向服务器发送请求命令
3. 浏览器发送请求头信息
4. 服务器应答
5. 服务器发送应答头信息
6. 服务器向浏览器发送数据
7. 服务器关闭TCP链接

具体请求信息如下

GET和POST请求的区别

GET请求是对任何人都可见的
POST请求一般是不可见的，但是可以被拦截

HTTP相应

比如

• 0 本地请求，服务器成功返回了页面
• 200 OK 服务器成功返回了数据或者页面
• 300-3007表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。
• 400Bad Request 语法错误导致服务器不识别
• 401Unauthorized 请求需要用户认证
• 404 Not found 指定的URL在服务器上找不到
• 500Internal Server Error 服务器遇到意外错误，无法完成请求
• 503ServiceUnavailable由于服务器过载或维护导致无法完成请求

XMLHttpRequest发送请求

• open(method,url,async)
• send(string)

例如

setRequestHeader() 设置请求头，必须在open和send之间

XMLHttpRequest取得相应


一个完整的XHR请求





JQuery中的Ajax

跨域请求

JS出于安全方面的考虑不允许跨域调用其他页面的对象。




跨域解决方案

• 服务器代理请求
• JSONP
• <script src="">标签
• XHR2 （ie10以下不支持）

//XHR2的设置
header("Access-Control-Allow-Origin:*")//星号代表全部，可以指定允许跨域地址
header("Access-Control-Allow-Methods:POST,GET")

nodejs跨域

var http=require("http")
var fs = require('fs')
var server=http.createServer();
server.on('request',function(req,res){
 
res.setHeader("Access-Control-Allow-Origin", "*"); 
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.setHeader("Content-Type", "text/html"); 
 
    if(req.url === "/login"){
          fs.readFile('./login.html','utf-8',function(err,data){
        	if(err){
        		console.log(err)
        	}
        	res.end(data)         
        }) 
 
    }
    
})
 
 
server.listen(8080,"localhost",function(){
    console.log("开始监听...");
});