AJAX-----基础

阿选不出来

已于 2022-03-07 18:15:13 修改

阅读量150

点赞数

文章标签：经验分享 javascript 前端

于 2022-03-06 09:39:46 首次发布

本文链接：https://blog.csdn.net/m0_63300737/article/details/123305858

版权

AJAX

Ajax工作原理

同步和异步

同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。

需要知道的一些知识

URL

URL地址由三部分组成

 传输协议
 域名
 端⼝号

传输协议

我们常⻅的传输协议是 http 和 https
只不过 http 是⼀种常⻅协议，不是很安全
https 是⼀种加密传输协议

域名

域名就代表着⽹络那⼀头那个电脑的 IP 地址

其实也就是我们要访问哪⼀个服务器

端⼝号

光找到服务器电脑还不⾏,还得找对⽂件夹才可以
⼤家都把⽂件夹编上号存储了0 ~ 255,一共256 个
每个⽂件夹⾥⾯还有对应的⼩⽂件夹0 ~ 255,一共256 个
那么一共就有256 * 256 个⽂件夹,也就是从0~ 65535
所以我们的端⼝号就有 65536 个,分别对应着0 ~ 65535
⼤家都把80端⼝号作为⼀个⽹站的默认端⼝号
http协议默认是80端⼝号
https协议默认是443端⼝号

XML

是一门可扩展标记语言,被设计用来传输和存储数据,都是自定义标签

HTTP

响应报文,请求报文

创建 XMLHttpRequest 对象

variable = new XMLHttpRequest();
vairable = new ActiveXObject("Microsoft.XMLHTTP");//老版本(IE5和IE6)

向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
//XMLHttpRequest对象的open()和send()方法

open(method,url,async)

method : 请求的类型;GET 或 POST
url: 文件在服务器上的位置
async: true(异步) 或 false (同步)

send(string)

string : 仅用于 POST 请求

GET POST ?

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

不愿使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET

xmlhttp.open("GET","/try/ajax/demo_get.php",true);  //一个简单的GET请求
xmlhttp.open("GET","/try/ajax/demo_get.php?=" + Math.random(),true) //向 URL 添加一个唯一的ID
xmlhttp.open("GET","/try/ajax/demo_get.php?fname=Henry&lname=Ford",true)   //通过GET 方法添加信息
//===================jQuery中的get post=================================通过 HTTP 请求加载远程数据
$.get('url',{a:100, b:300}, function() {
    //函数体
    //get 请求的参数就直接在 url 后面进行拼接就可以
})
$.post('url',{a:100, b:300}, function() {
    //函数体
    //post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接
})
//======================================
$.ajax({
    //URL
    url:  ,
    //参数
    data: {a:2, b:30},
    //请求类型
    type:,
    //响应体结果
    dataType: 'json',
    //成功的回调
    success: function(data) {
    
	},
	//超时时间
	timeout: 3000,
     //失败的回调
    error: function() {
            
    }
})

POST

xmlhttp.open("POST","/try/ajax/demo_post.php",true); //一个简单的POST请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")   //("名字","值")
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader

通常在HTTP协议里，客户端像服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，告诉服务器客户端要下载什么信息以及相关的参数.

而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。
但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这是当我们需要修改或添加这些参数时就用到了setRequestHeader 方法.

setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法而已,CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示.

GET 方式是没有提交内容的,GET 传参数的方式就是通过虚拟地址传送如:GET /bb.asp?www=1234 HTTP/1.1
参数全部就只有 "www=1234" 这么多;

POST是将参数放到HTTP后面的

setRequestHeader(header,value) : header 规定头的名称; value : 规定头的值

all

服务器响应

responseText

如果来自服务器的响应并非XML, 请使用 responseText 属性

responseText 属性返回字符串形式的响应

responseXML

如果来自服务器的响应是XML, 而且需要作为 XML 对象进行解析,请使用 responseXML 属性

responseType = ‘json’;自动转换

onreadystatechange 事件

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

XMLHttpRequest 对象的三个重要属性
onreadystatechange	储存函数(或函数名), 每当readyState 属性改变时, 就会调用该函数
readyState	存有 XMLHttpRequest 的状态.从0到4发生变化.
status	200:“OK” 404: 未找到页面

每当 readyState 改变时, 就会触发 onreadystatechange 事件(0-1,1-2,2-3,3-4)

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接受
3: 请求处理中
4: 请求也完成, 且响应已就绪

当 readyState 等于4 且状态为 200 时, 表示响应已就绪:

xmlhttp.onreadystatechange=function() {
    if(xmlhttp.readyState==4 && xmlhttp.status==200) {
        //
    }
}

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）

ASP/PHP

解决缓存问题

open("GET","url?t="+Date.now())

请求超时网络异常处理

//延时响应

setTimeout(() => {

	//设置响应体  设置允许跨域

	response.send('');

},3000)

    // 1. 创建对象
            const xhr = new XMLHttpRequest();
            //超时设置   2s设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function() {

            }
            //网络异常
            xhr.onerror = function() {
                
            }

abort() 取消请求

请求重复发送问题

// 假设有一个按钮控制着发送请求
const btn = document.querySelector('button');
let x = null;
let isSending = false;  // 是否正在发送请求
btn.onclick = function() {
    if(isSending) {
        x.abort(); //如果正在发送,则取消该请求,创建一个 新请求
        x = new XMLHttpRequest();
        //修改 isSending 的值
        isSending = true;
        x.open("GET","URL");
        x.send();
        ...
    }
}

Axios函数

axios.defaults.baseURL = "";
axios.get("",{
	params: {
	
	},
	headers: {
	
	},
	...
})
//===========没搞明白
axios.post("",{
	...
})