Ajax的基本使用和同源策略与跨域(JSONP和CORS)

一、原生Ajax的使用

什么是ajax?
ajax(异步 javaScript xml）能够刷新网页局部数据而不是刷新网页。

使用流程:

①GET请求：

1、实例化一个新的XMLHttpRequest对象

const xhr = new XMLHttpRequest();

2、对实例进行初始化

设置请求的方法和url:
xhr.open(‘GET’,‘http://127.0.0.1:8000/server’);

open(）方法中的几个参数分别是open(method,url,async)
method 是ajax的请求类型 get或者post请求
url 是请求的url 统一资源标识符
async是是否同步或者异步 true 或者 false

可以为url设置参数：?后跟参数(a=100&b=200…)不同参数用&符分隔
xhr.open(‘GET’,‘http://127.0.0.1:8000/server?a=100&b=200’);

3、发送

xhr.send();

4、进行事件绑定 处理服务端返回的结果

// readystate 是xhr对象中的属性，表示状态
0(未初始化) 1(open方法完毕) 2(send方法完毕) 3(服务端返回部分结果) 4(服务端返回全部结果)
	// change 改变的时候触发
	xhr.onreadystatechange = function(){
	    // 处理服务端返回的结果
	    // 判断(返回所有结果)
	    if(xhr.readyState===4){
	        // 判断响应状态码 200 404 403 401 500
	        // 2xx都表示成功
	        if(xhr.status>=200&&xhr.status<300){
	            // 处理结果 行 头 空行 体
	            //响应
	            console.log(xhr.status);//状态码
	            console.log(xhr.statusText);//状态字符串
	            console.log(xhr.getAllResponseHeaders());//所有响应头
	            console.log(xhr.response);//响应体
	            // 设置HTML元素result的文本
	            result.innerHTML =xhr.response;
	        }else{
	
	        }

②POST请求(与GET请求类似)：

// 1.创建对象
   const xhr = new XMLHttpRequest();
    // 2.初始化与设置类型与URL
    xhr.open('POST','http://127.0.0.1:8000/server