Ajax和跨域的学习

1.什么是ajax,ajax的作用

ajax不是编程语言，是一个标准，是异步的js和xml ，是一种用于创建快速动态网页的技术，可以再不重新加载整个网页的情况下，对网页的某个部分进行更新，

2.ajax请求步骤

//创建XMLHttpRequest对象  
var ajax = new XMLHttpRequest();
//open（）规定请求的类型、URL以及是否异步处理请求  
ajax.open('GET',url,true)
//发送请求   send参数是String或者null ,String是post请求，get一般传空
ajax.send();
//接收服务器的响应数据
ajax.onreadystatechange = function() {
	if(ajax.readyState == 4 &&(ajax.status == 200) {
	}
	};
	注意：如果像HTML表单那样的post请求，要用setRequestHeader()来添加请求头,然后在send()方法规定发送的数据
	ajax.setReqestHeader("content-type','appliction/x-www-form-urlencoded);
	ajax.send("fname=Henry&lname=Ford");
	

2.1 创建XHR对象 new XMLHttpRequest()

常用属性： onreadystatechange:存储函数，每当readyState改变时，调用onreadystatechange
readyState:表示XMLHttpRequest的状态
0：请求未初始化、
1：已建立服务器连接
2：已接收请求
3：已处理请求
4：请求已完成，且响应好了
reponseText: 以文本方式返回响应
reponseXML：以XML格式返回响应
status: 返回状态为数字
statusText ：返回状态为字符串
方法
abort() :取消请求
open()：打开请求
send()：发送获取请求
setRequestHeader()：发送请求头

3 .ajax请求方式,和优缺点

3.1GET请求

优点：可被缓存、可保留在浏览器的历史纪录中、可被收藏、比post简单和更快、获取数据
缺点：不应该处理敏感数据、请求长度有限

3.2POST请求

优点：请求数据长度没有要求、更安全、上传数据
缺点：不可缓存、不保留在浏览器的历史纪录中，不可被收藏

4.什么是跨域

跨域就是请求url的 __协议、域名、端口 __ 的任意一个或多个不同，就是跨域
协议：如http、 https
域名分为主域名（baidu.com）和子域名 （www)
端口号：默认是80

5.跨域的解决方法

5.1jsonp

在网页中通过添加一个sctipt元素，向服务器请求json数据，服务器将数据放到一个知道名字的回调函数的参数传回来。只支持get请求
1、js原生实现

var script = document.createElement("script");
//设置script的src属性为接口地址，并要返回callback回调函数名称
script.src = 'http://localhost/index.php?callback=jsonpCallback';
//插入到页面中
document.head.appendChild(script);
//用函数接收返回数据
function jsonpCallback(data){
	console.log(res)
}

2、jq实现

$.ajax({
url: 'http://localhost/index.php',
type: 'get',
dataType: 'jsonp',
jsonpCallback: 'jsonpCallbackname',
data: {}
});

5.2设置document.domain

应为浏览器通过document.domain属性来检查页面是否同源，因此设置相同的document.domian,就可以共享cookie,
注意：这个方法只能用于主域相同、子域不同的情况

docuemnt.domain = 'test.com';

5.3CORS

服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
1、普通跨域请求：设置服务器端的Access-Control-Allow-Origin
2、带cookit的跨域请求： 前后的都需要设置
前端设置：根据ajax.withCredentials判断时候带有cookie
1.JS原生

// 前端设置是否带cookie
xhr.withCredentials = true;

2.jq

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});