尚硅谷ajax学习记录（一）

一、原生AJAX

1.ajax简介

• 全称：Asynchronous JavaScript And XML （异步的JS和XML）
• 通过ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
• AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
• 应用：注册页面（用户名是否重复），淘宝页面点上去显示，二级分类显示，搜索框搜索都是用到ajax请求

2.XML简介

• XML可扩展标记语言。
• XML被设计用来传输和存储数据。
• XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签， 全都是自定义标签，用来表示一些数据。

3.ajax的特点

(1)ajax的优点

• 可以无需刷新页面而与服务器端进行通信。
• 允许你根据用户事件来更新部分页面内容。

(2)ajax的缺点

• 没有浏览历史，不能回退
• 存在跨域问题(同源)
• SEO（搜索引擎优化）不友好

二、HTTP（超文本传输协议）

• 协议规定了浏览器和万维网服务器之间互相通信的规则

1.请求报文

包括四个部分
行: POST   ?not_checkout   HTTP/1.1
头: Host:atguigu.com
  Cookie: name=guigu
 Content-type:application/x-www-form-urlencoded
 User-Agent:chrome 83
空行
体：  username=adin…

2.响应报文

包括四个部分
行: HTTP/1.1    200    charset=utf-8
头: Content-Type:text/html;charset=utf-8
      Contentlength:2048
      Content-encoding:gzip
     User-Agent:chrome 83
空行
体： html内容

三、express框架

1.基本使用

目录下node express.js运行，然后浏览器输入localhost:8000进入可以查看到请求响应报文

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express()

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('Hello world')
})

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

案例

<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
//绑定事件
btn.onclick = function(){
    //1. 创建对象
    const xhr = new XMLHttpRequest();
    //2. 初始化, 设置请求方法和url
    xhr.open('GET','http://127.0.0.1:8000/server'); //server.js文件中设置
    //3.发送
    xhr.send();
    //4.事件绑定  处理服务器返回的结果
    //on  when  当...时候
    //readystate 是xhr对象中的属性,表示状态0 1 2 3 4
    //change 改变
    xhr.onreadystatechange = function(){
        //判断（服务器返回了所有结果）
        if(xhr.readyState === 4){
            //判断响应状态码 200 404 403 401 500
            //2xx表示成功
            if(xhr.status >= 200 && xhr.status < 300){
                //处理结果 行 头 空行 体
                //1.响应行
                console.log(xhr.status); //状态码
                console.log(xhr.statusText) //状态字符串
                console.log(xhr.getAllResponseHeaders());//响应头
                console.log(xhr.response);//响应体
            }else{
                
            }
        }
    }
}
</script>

server.js文件

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

    //设置响应体
    response.send('Hello ajax')
})

输出

2.ajax参数设置

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

3.POST请求

初始化时设置发送请求类型为POST

 xhr.open("POST", "http://127.0.0.1:8000/server");

同时server.js文件中添加

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

    //设置响应体
    response.send('Hello ajax post')
})

• post设置请求体

//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('12231231231')

四、ajax设置请求头

固定写法，会报错，需要在server.js中进行处理

//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.setRequestHeader('name','atguigu')

五、服务器响应JSON数据

响应数据

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

    //设置响应体
    // response.send('Hello ajax post')
    //响应一个数据
    const data = {
        name:'atguigu'
    }
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str)
})

对JSON数据响应的两种方式

• 1.手动对数据转化

let data = JSON.parse(xhr.response);
result.innerHTML = xhr.response.name;

• 2 自动转换

 //设置响应体数据的类型
 xhr.responseType = 'json'

result.innerHTML = xhr.response.name

六、自动重启工具

• 安装nodemon插件
• 运行 npx npdemon server.js
• 保存后会自动运行

七、IE缓存问题

 xhr.open("POST", "http://127.0.0.1:8000/ie?t="+Data.now());

八、请求超时与网络异常处理

//设置2s后为超时
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function{
	alert("请求超时");
}
//网络异常回调
xhr.onerror = function(){
	alert("网络出现问题");
}

九、手动取消ajax请求

利用abort

btns[1].onclick = function(){
	x.abort();
}

十、重复发送请求问题

利用一个标识变量进行标记

let isSending = false;
btns[1].onclick = function(){
	//判断标识变量
	if(isSending) x.abort();  //如果正在发送,则取消该请求,创建一个新的请求
x = new XMLHttpRequest();
//在发请求,修改标识变量的值
isSending = true;
x.onreadystatechange = function () {
   if (x.readyState === 4) {
   		isSending = false;
	}
}