Ajax技术

最新推荐文章于 2022-11-25 17:07:55 发布

Han_Zhou_Z

最新推荐文章于 2022-11-25 17:07:55 发布

阅读量502

点赞数 1

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/han_zhou_z/article/details/123177869

版权

本文详细介绍了Ajax技术的工作原理及其与传统网站的区别，强调了异步特性，并讲解了XMLHttpRequest对象的关键作用。同时，文章还探讨了在Express项目中解决跨域问题的cors方法。此外，对jQuery如何封装ajax进行了深入解析，包括$.ajax、$.get、$.post及表单序列化等实用功能。

摘要由CSDN通过智能技术生成

一、Ajax技术

1、传统网站的缺陷

2、传统网站从浏览器端向服务器端发送请求的工作原理

3、Ajax网站从浏览器端向服务器端发送请求的工作原理

4、Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)

5、Express项目中解决跨域问题：采用cors方式

二、jQuery对ajax的封装

1、$.ajax({})：可以实现get、post等请求

2、$.get(url,[data],[callback],[type])：实现get请求

3、$.post(url,[data],[callback],[type])：实现post请求

4、表单序列化serialize()

一、Ajax技术

1、传统网站的缺陷

（1）无法局部刷新页面

（2）只能通过刷新页面来获取服务器端的数据,若数据量大、网速慢用户等待的时间会很长

（3）表单提交问题

2、传统网站从浏览器端向服务器端发送请求的工作原理

3、Ajax网站从浏览器端向服务器端发送请求的工作原理

4、Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)

（1）同步：客户端向服务器端发送请求,然后等待服务器端响应后再进行后续的操作

（2）异步：客户端向服务器端发送请求后不等待服务器端的响应,继续进行后续操作;当服务器端响应后,客户端会调用相应的回调函数进行处理.

（3）Ajax技术的核心：XMLHttpRequest对象。不是w3c的标准对象,用户需要在JavaScript代码中获取该对象

① 获取方法：需要判断浏览器的类型

let xmlhttpRequest;			  
    if(window.ActiveXObject){ //表示浏览器是早期的IE浏览器				  
        xmlhttpRequest = new ActiveXObject('Microsoft.XMLHTTP')				  
    }else if(window.XMLHttpRequest){ //表示符合w3c标准的浏览器
        xmlhttpRequest = new XMLHttpRequest()
}

② XMLHttpRequest对象的属性

属性

描述

Onreadystatechane

每次状态改变所触发事件的事件处理程序

readyState

对象状态值：

0 = 未初始化（uninitialized）

1 = 正在加载（loading）

2 = 加载完毕（loaded