Ajax从入门到精通

目录

1.1、Ajax简介

1.2、XML简介

1.3、AJAX的特点

1.3.1优点

1.3.2缺点

1.4HTTP协议简介

1.4.1 请求报文：

1.4.2 响应报文

 1.5 NodeJS安装

1.6 express基本使用

1.6.1 安装

启动

 1.7AJAX基本使用

1.8 AJAX设置请求参数

1.9 AJAX发送post请求

 1.10 AJAX设置post请求参数

 1.11 AJAX中设置请求头信息

 1.12 服务端响应JSON数据

 1.13 自动重启工具安装 nodemon

1.14 AJAX-IE缓存问题解决

1.15 AJAX请求超时与网络异常处理

 1.16 AJAX取消请求

 1.17 AJAX请求重复发送问题

2.1Axios发送AJAX请求

2.2使用fetch函数返送AJAX请求

 3.1 AJAX同源策略

---

1.1、Ajax简介

Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML

通过AJAX可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据

1.2、XML简介

XML（Extensible Markup Language），可扩展标记语言

XML 用来传输和存储数据

XML与HTML类似，不同的是HTML中有预定义标签，而XML中码云预定义的标签

1.3、AJAX的特点 1.3.1优点

1）可以无需率先你页面而与服务器端进行通信

2）允许你根据用户时间来更新部分页面内容

1.3.2缺点

1）没有浏览历史，不能回退

2）存在跨域问题（同源）

3）SEO不友好

1.4HTTP协议简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议。

1.4.1 请求报文：

请求行 ：POST/GET URL 协议/版本号
请求头 ：

空行

请求体

1.4.2 响应报文

请求行 ：版本号 状态码 原因
请求头 ：

空行

请求体：html内容

 1.5 NodeJS安装

node.js 安装详细步骤教程_程序员老油条的博客-CSDN博客_node.js

1.6 express基本使用 1.6.1 安装

npm i express

//引入
const express = require('express');
//创建应用对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装

app.get('/',(request,response)=>{

   //设置响应体
    response.send('HELLO AJAX');
});

//监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已启动，8000端口监听中');
})

启动

 1.7AJAX基本使用

点击按钮拿到响应体内容在方框中做出呈现

响应体内容为：

express.js


//引入
const express = require('express');
//创建应用对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装

app.get('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
   //设置响应体
    response.send('HELLO AJAX');
});

//监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已启动，8000端口监听中');
})

html




    
    
    
    
    


    点击发送请求
    
    

 

1.8 AJAX设置请求参数

多个参数

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')

1.9 AJAX发送post请求

鼠标经过方框即显示响应体内容

html





    
    
    
    
    


    
    
    

js


app.post('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
   //设置响应体
    response.send('HELLO AJAX POST');
});

 

 

 1.10 AJAX设置post请求参数

在send请求中设置(跨域设置任何格式，前提是服务端能够处理）

方式一：

xhr.send('a=100&b=200&c=300');

方式二：

xhr.send('a:100&b:200&c:300');

 1.11 AJAX中设置请求头信息

方法一：固定写法

            //创建对象
            const xhr=new XMLHttpRequest();
            //初始化
            xhr.open('POST','http://127.0.0.1:8000/server')
            //设置请求头
            //Content-type设置请求体内容的类型
            //application/x-www-form-urlencoded参数查询字符串类型（固定写法）
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            //发送
            xhr.send('a=100&b=200&c=300');

            //设置请求头
            //Content-type设置请求体内容的类型
            //application/x-www-form-urlencoded参数查询字符串类型（固定写法）
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

 方法二：自定义

xhr.setRequestHeader('name','zxz')

 报错是因为name为自定义的而不是预定义的（浏览器有安全机制，不能发）如何解决？

后端解决：

//可以接收任意类型的请求
app.all('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //表示所有类型的请求头都能接收
    response.setHeader('Access-Control-Allow-Headers','*')
   //设置响应体
    response.send('HELLO AJAX ALL');
});

 1.12 服务端响应JSON数据

客户端发送请求，服务端返回结果通常为JSON格式数据 ，我们要处理这些数据

//可以接收任意类型的请求
app.all('/json-server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //表示所有类型的请求头都能接收
    response.setHeader('Access-Control-Allow-Headers','*')
    //响应一个数据
    const data={
        name:'zxz'
    }
    //对对象进行字符串转换
    let str=JSON.stringify(data);
   //设置响应体
    response.send(str);
});

 前端处理这些数据

//手动对数据转换
                    let data=JSON.parse(xhr.response);
                    result.innerHTML=data.name

//自动设置响应体内容
            xhr.responseType='json'

 //创建对象
            const xhr=new XMLHttpRequest();
            //自动设置响应体内容
            xhr.responseType='json'
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            //设置请求头
            //Content-type设置请求体内容的类型
            
            //发送
            xhr.send();
            //事件绑定 处理服务端返回结果
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4)
                 if(xhr.status>=200&&xhr.status<300){
                    
                    result.innerHTML=xhr.response.name
                 }

 完整代码：

 1.13 自动重启工具安装 nodemon

当文件内容修改时 自动启动

1.安装 npm i -g nodemon

2.重启

 改服务端代码会变方便

1.14 AJAX-IE缓存问题解决

什么是IE缓存问题？

为了提高访问网页的速度，InternetExplorer浏览器会采用累积式加速的方法，将你曾经访问的网页内容（包括图片以及cookie文件等）存放在电脑里。这个存放空间，我们就称它为IE缓存。以后我们每次访问网站时，IE会首先搜索这个目录，如果其中已经有访问过的内容，那IE就不必从网上下载，而直接从缓存中调出来，从而提高了访问网站的速度。

如何解决？

加一个当前时间戳

xhr.open('GET','http://127.0.0.1:8000/ie?t='+Data.now())

1.15 AJAX请求超时与网络异常处理

请求超时

//超时设置 两秒钟还没有结果那么就取消
            xhr.timeout=2000
            xhr.ontimeout=function(){
                alert("网络异常，请稍后重试")
            }

 网络异常：

xhr.onerror=function(){
                alert("你的网络似乎出现了问题，请检查网络")
            }

 1.16 AJAX取消请求

手动取消

btns.onclick=function(){
            xhr.abort();
        }

 1.17 AJAX请求重复发送问题

节流

 let xhr=null
        //标识变量
        let isSending=false //是否正在发送AJAX请求
        window.onkeydown=function(){
            //判断标识变量 如果正在发送请求 那么就取消该请求 创建一个新的请求
            if(isSending)
            xhr.abort()
            //创建对象
            xhr=new XMLHttpRequest();
            //修改标识变量
            isSending=true
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/delay')
            //设置请求头
            //Content-type设置请求体内容的类型
            
            //发送
            xhr.send();
        
            //事件绑定 处理服务端返回结果
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4){
                    isSending=false;
                }
                 
            }
        }

2.1Axios发送AJAX请求

axios中文文档|axios中文网 | axios

    
    
    
    
    


    get
    post
    ajax
    
    

2.2使用fetch函数返送AJAX请求

    ajax
    
    

//用户名检测是否存在
app.all('/checked-username',(request,response)=>{
    const data={
        exist:1,
        msg:'用户名已存在'
    }
    //将数据转化为字符串
    let str=JSON.stringify(data)
    response.end(`handle(${str})`)
})

 2.CORS

一、cors是什么

跨源资源共享（CORS） - HTTP | MDN

    发送请求