19-ajax请求/跨域/jsonp/服务器反向代理

ajax

ajax简介

概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。

在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：

地址栏输入地址，回车，刷新

特定元素的 href 或 src 属性

表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应）， 如果我们可以通过 JavaScript 直接发送网络请求，那么 Web 的可能就会更多，随之能够实现的功能也会更多，至 少不再是“单机游戏”。

AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编 程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载 页面。让 Web 更能接近桌面应用的用户体验。

说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现 网络编程。

ajax基本步骤

// 1.实例化XMLHttpRequest对象
	let http = new XMLHttpRequest()

	// 2.规划一个HTTP请求
	// mehods: String，请求方式，可以是"get"也可以是"post"
	// url:String，请求地址，比如："http://192.168.0.1/xxxx.txt"
	// async:Boolean，同步或异步，可选参数，默认是异步的。
	http.open(method,url,async)

	// 3.发送HTTP请求
	http.send()

	// 4.接收来自服务器端的请求
	http.onreadystatechange = function(){
		if(http.readyState === 4){
			console.log(http.responseText)
		}
	}

带请求参数

let http = new XMLHttpRequest()
			http.open("get","http://10.35.164.50/message.php?name=wangdawei");
			http.send()
			http.onreadystatechange = function(){
				if(http.readyState === 4){
					console.log(http.responseText)
				}
			}

readyState 状态

由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被 触发多次，所以我们有必要了解每一个状态值代表的含义：

状态 状态描述 说明

0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法。

1 OPENED open() 方法已经被调用，建立了连接。

2 HEADERS_RECEIVED send() 方法已经被调用，并且已经可以获取状态行和响应头。

3 LOADING 响应体下载中， responseText 属性可能已经包含部分数据。

4 DONE 响应体下载完成，可以直接使用 responseText 。

遵循 HTTP

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是 HTTP 请求，同样符合 HTTP 约定的格式

get请求(速度快 安全性不好)

var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

post请求 （速度慢 安全性高）

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

post传参

      let http = new XMLHttpRequest()
        http.open("POST","http://127.0.0.1:8080/getAll");
        // 设置请求头
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.send("name=wangdawei&age=18");
        http.onreadystatechange = function(){
            if(http.readyState === 4){
                consolelog(http.responseText)
            }
        }

JSON的正反解析

post和get请求的区别

1
get请求一般用去请求获取数据
post一般作为发送数据到后台时使用
2
get请求也可传参到后台，但是其参数在浏览器的地址栏的url中可见，所以隐私性安全性较差，且参数长度也是有限制的
post请求传递参数放在Ruquset body中，不会在url中显示，比get要安全，且参数长度无限制
3
get请求刷新浏览器或回退时没有影响
post回退时会重新提交数据请求
4
get请求可被缓存
post请求不会被缓存
5
get请求保留在浏览器历史记录中
post请求不会保留在浏览器历史记录中
6
get请求可被收藏为书签
post请求不能被收藏为书签
7
get请求只能进行url编码
post支持多种编码方式
8
get请求比较常见的方式是通过url地址栏请求
post最常见是通过form表单发送数据请求

JSON.stringify(xxxx) // 反解析
JSON.parse(xxxx) //正解析

跨域

什么是跨域

浏览器的同源组策略：浏览器安全防护的一种机制，
它规定了一个来自某个服务器的静态文件不允许向另外一台跨域服务器发送Ajax请求。
只有主机名，协议名，端口号三者都一致的情况下才会被视作是同域（或一台服务器），
只要三者有任何一个不一样，那么这个Ajax请求就会被同源组策略所阻止。

服务器端反向代理解决跨域(我用的是node js写接口)

server.all("*",function(req,res,next){
	    //设置允许跨域的域名，*代表允许任意域名跨域
	    res.header("Access-Control-Allow-Origin","*");
	    //允许的header类型
	    res.header("Access-Control-Allow-Headers","content-type");
	    //跨域允许的请求方式 
	    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
	    if (req.method.toLowerCase() == 'options')
	        res.send(200);  //让options尝试请求快速结束
	    else
	        next();
	})

JSONP解决跨域

原理

JSONP不是一套标准技术，而是解决跨域问题的方法之一。
1 具体的工作机制是，前端利用一个script标签向后端发送一个HTTP请求，并且提前准备好一个回调函数，这个回调函数的函数名会在请求参数中在callback参数值中传递给后端。
2 后端接收到来自前端发送请求后，拆解出callback参数的参数值并且以此为函数名拼接一段执行调用函数的JS代码段返回给前端并把数据当做这个函数的实参一并发送。
3 前端接收到执行函数的代码段后会自动调用之前声明的回调函数，回调函数中的形参就代表后端返回的数据。

前端

        function wangxiaowei(data){
    		console.log(data)
    	}

    	let script = document.createElement("script")
    	script.setAttribute("src","http://10.35.164.50:8080/test?callback=wangxiaowei");
    	document.querySelector("body").appendChild(script)

后端(用node js写的后端)

let server = require('express')();
let mysql = require('mysql')
let sql = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '123456',
  database : 'tech'
});


server.get("/test",function(request,response){

	let callback = request.query.callback;

	sql.query(`SELECT * FROM flights`,(error,data)=>{
		if(error){
			console.log(error)
			response.end("error")
			return
		}
		response.end(`${callback}(${JSON.stringify(data)})`)
	})

})


server.listen(8080)