学习Ajax

一、原生Ajax

AJAX
- AJAX（Asynchronous JavaScript AND XML），就是异步JS和XNL。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势为无刷新获取数据。AJAX不是新的编程语言，而是将现有标准结合在一起使用的新方式。
XML介绍
- XML可扩展标记语言，被设计用来传输和存储数据。现在已被JSON取代
AJAX的特点：
- AJAX的优点：
  - 可以无需刷新页面与服务器端进行通信
  - 允许根据用户事件来更新部分页面内容
- AJAX的缺点：
  - 没有浏览历史，不能回退
  - 存在跨域问题（同源）
  - SEO不友好（SEO搜索引擎优化）

AJAX的使用

express基于Node.js平台，快速、开放、极简的Web开发框架。

发送文件的方法是response.sendFile(_dirname+'文件路径')，可以发送文件，比如html页面

//1.引入express
 const express = require("express")
 //2.创建应用对象
 const app = express()
 //3.创建路由规则
 //request是对请求报文的封装
 //response是对响应报文的一个封装
 app.get('/server', (request, response) => {
     response.send('hello express');
 });
 // 4.监听端口
 app.listen(8000, () => {
     console.log("服务端已经启动 8000端口");
 });

用户端发送ajax请求的步骤(GET请求)

创建对象
初始化，设置请求方法和URL
发送请求
事件绑定，处理服务端返回的数据

若要添加参数可以直接在请求URL后面添加,URL?a=100&b=200

  //1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化，设置请求方法和URL
xhr.open('GET', 'http://192.168.1.104:8000/server');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
// on when 当...的时候
//readystate 是xhr对象中的属性，表示状态0，1，2，3，4
xhr.onreadystatechange = function() {
    //判断服务端返回所有的结果时候调用
    if (xhr.readyState == 4) {
        //判断响应状态码,2xx均表示成功
        if (xhr.status >= 200 && xhr.status <= 300) {
            //处理结果
            console.log(xhr.status); // 响应状态码
            console.log(xhr.statusText); // 状态字符串
            console.log(xhr.getAllResponseHeaders()); // 所有响应头
            console.log(xhr.response); //响应体
        } else {
            alert("请求失败!")
        }
 
    }
}

用户端发送ajax请求的步骤(POST请求)
- 创建对象
- 初始化，设置请求方法和URL
- 发送请求,可以写要发送的数据到xhr.send('发送的数据')
- 事件绑定，处理服务端返回的数据
AJAX发送请求设置请求头：xhr.setRequestHeader('content-type':'application/x-www-form-urlencoded')
- content-type:用来设置请求体内容类型的
- 一般会将身份校验的信息放在请求头信息里。
后端返回JSON数据（字符串）转换
- 手动转换，使用JSON.parse()方法进行转换
- 自动转换，设置响应体数据类型：xhr.responseType='json'
node.js中使用express开发，安装nodemon改变代码自动重启服务npm install -g nodemon

AJAX发送请求，IE缓存问题

问题描述：IE浏览器对请求结果具有缓存操作，会将上一次的请求放入缓存。这样导致不能实时更新请求结果。

解决问题：在请求初始化的时候，在URL后面加入事件戳，使得每次请求都不同。

           xhr.open('GET','http://192.168.1.104:8000/ie?t='+Date.now())
        ```   
5. AJAX请求超时与网络异常处理
    - 超时`取消请求`：`xhr.timeout=2000`
    - 超时执行的回调：`xhr.ontimeout`
      ```javascript
          xhr.ontimeout=function(){
              alert("网络超时，请稍后重试!");
          }

网络异常回调：xhr.onerror

1
2
3

xhr.onerror=function(){
    alert("网络似乎出了一些问题!");
}

AJAX取消请求
- 手动取消请求abort()
- abort()是声明请求对象的一个方法，使用:
  1
  2
  var xhr=new XMLHttpRequest();
  xhr.abort(); //取消请求

AJAX请求重复发送问题

当用户重复发送请求时，可以在每次发送请求之前取消该请求。

var btn = document.querySelector('button');
var res = document.querySelector('.result');
let isSending = false;
let xhr = null;
btn.addEventListener('click', function() {
        if (isSending) xhr.abort(); //如果为true则取消请求
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://192.168.1.103:8000/server');
        xhr.send();
        isSending = true; //修改标识符变量的值
        xhr.onreadystatechange = function() {
            //判断服务端返回所有的结果时候调用
            if (xhr.readyState === 4) {
                isSending = false; //请求成功则修改标识符的值
                // 判断响应状态码,2xx均表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    res.innerHTML = xhr.response;
                }

            }
        }
    })

jQuery发送AJAX请求

jQuery发送GET请求$.get('请求路径',{请求参数，键值对1的形式},回调函数,设置响应体数据类型)

1
2
3

$.get('http://192.168.1.103:8000/server',{name:'fanda',age:22},function(data){
    console.log("返回的结果是"+data); 
})

jQuery发送POST请求：$.post('请求路径',{请求参数，键值对1的形式},回调函数,设置响应体数据类型)

1
2
3

$.get('http://192.168.1.103:8000/server',{name:'fanda',age:22},function(data){
    console.log("返回的结果是"+data); 
 },'json')

通用型方法发送ajax请求:$.ajax({url,发送参数，请求类型，成功的回调})

$.ajax({
    //url
    url:'http://192.168.1.103:8000/server',
    //参数
    data:{a:100,b:200},
    //请求类型
    type:'GET',
    //响应体结果类型
    dataType:'json',
    //c成功的回调
    success:function(data){
        console.log(data);
    }
    //超时时间
    timeout:2000,
    //失败请求的回调
    error:function(){
        console.log("请求出错了！");
    }

})

Axios发送ajax请求

Axios是一个基于 promise 的 HTTP 库
设置baseURL：axios.defaults.baseURL=''

发送get请求的基本格式：

axios.defaults.baseURL = 'http://192.168.1.103:8000'
btn[0].onclick = function() {
    //get请求
    axios.get('/server', {
        //url参数
        params: {
            id: 100,
            age: 18
        },
        //设置请求头信息
        headers: {
            'content-type': 'application/json'
        }
    }).then(value=>{
        console.log(value);
    })
}

发送POST请求：axios.post('url'[,data[,config]]),config为其他配置

Axios通用方式发送请求

axios({
    //url
    url:'/server',
    //url参数
    params:{
        i:10,
        age:22,
    },
    //头信息参数
    headers:{
        a:100,
        b:200,
    },
    //请求体参数
    data:{
        username:'admin',
        password:'admin'
    }
}).then(response=>{
    console.log(response);
    //响应状态码
    console.log(response.status);
    //响应状态字符串
    console.log(response.statusText);
    //响应头信息
    console.log(response.headers);
    // 响应体细腻些
    console.log(response.data);
})

使用fetch函数发送AJAX请求

fetch()函数的基本使用

btn.onclick = function() {
 fetch('http://192.168.1.103:8000/fetch', {
     //请求方法
     method: 'POST',
     //请求头
     headers: {
         name: 'fanda'
     },
     //请求体
     body: 'username=admin&password=admin'
 }).then(response => {
     //return response.text();
     return response.json()
 }).then(response => {
     console.log(response);
 })

AJAX关于跨域

ajax同源策略：
- 同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。
- 同源：协议、域名、端口号必须完全相同
- 违背同源策略就是跨域
- ajax默认遵循同源策略。
解决跨域问题的几个方案：JSONP, CORS

JSONP解决跨域

JSONP(JSON with Padding),是一个非官方的跨域解决方案，纯粹凭借程序员开发出来。只支持get请求。

JSONP的工作原理：由于网页中有一些标签天生具有跨域能力，比如:img , link , iframe , script。于是JSONP就利用script标签的跨域能力来发送请求。请求返回带参数的函数引用，前端接收数据当成js代码执行。

var val = document.querySelector('input');
var p = document.querySelector('p')
val.onblur = function() {
    var username = this.value;
    //创建script标签
    const script = document.createElement('script')
        //设置标签的src属性
    script.src = 'http://192.168.1.103:8000/check-name'
        //将标签插入到文档中
    document.body.appendChild(script);
}
          
function handle(data) {
    val.style.border = "1px solid red"
    p.innerHTML = data.msg
}
val.onfocus = function() {
        p.innerHTML = "";
    }

CORS解决跨域
- CORS（Cross-Origin Resource Sharing）,跨域资源共享。CORS是官方的跨域解决方案，他的特点是不需要在客户端做任何特殊操作，完全在服务器中进行处理。支持get和post请求。跨域资源共享新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
- CORS工作原理：通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到响应后会对响应放行。
- CORS的使用：
  1
  2
  3
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  response.setHeader('Access-Control-Allow-Method', '*');