Ajax从入门到精通

Ajax从入门到精通,第1张

目录

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




    
    
    
    Document
    


    
    
    

 

1.8 AJAX设置请求参数

多个参数

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

1.9 AJAX发送post请求

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

html





    
    
    
    Document
    


    
    
    

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
                 }

 完整代码:




    
    
    
    Document
    


    
    
    

 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




    
    
    
    Document
    


    
    
    
    
    

2.2使用fetch函数返送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