AJAX与HTTP详解及跨域解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42312396/article/details/123980918

ajax

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
官方文档说明，AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

优点
1)可以无需刷新页面与服务器端通信，部分更新
缺点
1）没有浏览器历史，有跨域问题
2）seo不友好

HTTP

hTPP协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

重点是格式与参数，以下是格式与相应内容举例

 行     Get/Post /s?ie=utf-8  http/1.1 Get单纯的读取资源，
        Post会传入一定的数据

 头    Host: baidu.com
       Cookie：name=test
       Content-type: application/x-www-form-urlencoded
       User-Agent: chrome 83
 空格

 体     get请求，请求体可以为空
       username=admin&password=admin

响应报文

行  HTTP/1.1 200 OK

头  Content-Type：text/html;charset=utf-8
    Content-length: 2048
    Content-encoding: gzip

空行
体  <HTML></HTML>

后端

var express = require('express');//引入express
var mysql = require('mysql');//引入mysql
var app = express();//创建实例
app.post('/user',(req,res)=>{
 //设置响应头，设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
//设置请求头时需要用app.all
    res.setHeader('Access-Control-Allow-Headers','*');
	//发送
    res.send(rows);
});
app.get/app.all

XMLHttpRequest发送ajax

          //1、创建对象
         const xhr = new XMLHttpRequest();
         //2、初始化
         xhr.open('POST','http://127.0.0.1:3000/user');
         //3、设置请求头,这是自带的请求头
         xhr.setRequestHeader('Content-Type'
         ,'application/x-www-from-urlencoded');
         //4、这是自定义的请求头,自定义请求头需要服务器设置响应头
         xhr.setRequestHeader('name','test3');

         //发送
         xhr.send('name=test3');
         //绑定
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){//判断（服务端返回了所有的结果）
                if(xhr.status >=200 &&xhr.status <300){
                    result.innerHTML = xhr.response;
                }
            }
        }
	 //  console.log(xhr.status);//状态码 200
    //  console.log(xhr.statusText);//状态字符串 ok
   //  console.log(xhr.getAllResponseHeaders());//得到响应头
  //   console.log(xhr.response);//响应体

readyState有五种可能的值：
0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。
1 (载入)：已经调用open() 方法，但尚未发送请求。
2 (载入完成)：请求已经发送完成。
3 (交互)：可以接收到部分响应数据。
4 (完成)：已经接收到了全部数据，并且连接已经关闭。

使用axios在vue中简单获取

基于promise
npm install axios -s 命令行安装


```javascript
import axios from 'axios';//引入，axios无需use
 
 <button @click="getUser">注册</button> //模板页面内容
 
  beforeCreate() {
        axios.defaults.baseURL = 'http://127.0.0.1:3000'
            //设置公共接口
    },
	methods:(){
	getUser(){
       axios.get('/user',{
          params:{
             id:1
          },
         headers:{ //请求头
            name:'test'
          }  });}}