jQuery（二）:ajax与jQuery、Json与jQuery、跨域与jQuery

最新推荐文章于 2024-04-04 10:37:24 发布

m0_50134014

最新推荐文章于 2024-04-04 10:37:24 发布

阅读量188

点赞数

分类专栏：前端文章标签： jquery ajax json

本文链接：https://blog.csdn.net/m0_50134014/article/details/120934003

版权

本文详细介绍了jQuery中AJAX的使用，包括XMLHttpRequest对象、操作步骤和jQuery的$.ajax()方法。同时，讲解了JSON的数据结构和在前后端交互中的应用，以及如何处理JSON数据。此外，还探讨了跨域问题，包括概念、解决方案及jQuery的跨域处理方法。

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

1.AJAX

1.什么是AJAX

Asynchronous Javascript And Xml
异步的 JS 和 xml(EXtensible Markup Language)

通过 JS 异步的向服务器发送请求并接收响应数据

同步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低

异步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待

AJAX优点：

1.异步访问

2.局部刷新

使用场合：

1.搜索建议

2.表单验证

3.前后端分离

2.AJAX核心对象 - 异步对象(XMLHttpRequest)

1.什么是XMLHttpRequest [简称为 xhr]

称为 “异步对象”，代替浏览器向服务器发送异步的请求并接收响应

[xhr 是由JS来提供的]

2.创建异步对象 (xhr)

1.IE7+,Chrome,Firefox,Safari,Opera) -> 调用 XMLHttpRequest 生成 xhr对象

2.IE低版本浏览器中(IE6以及以下) -> 调用 ActiveXObject() 生成xhr

<script>
	if(window.XMLHttpRequest){
   
		//支持 XMLHttpRequest
		var xhr = new XMLHttpRequest();
	}else{
   
		//不支持XMLHttpRequest,使用 ActiveXObject 创建异步对象
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
</script>

3.xhr 的成员

1.方法 - open()

作用：创建请求

语法：open(method,url,asyn)

参数：

method:请求方式，取值’GET’ 或 ‘POST’

url:请求地址，字符串。(一般采用相对地址)

asyn:是否采用异步的方式 - true:异步 / false:同步

ex: xhr.open(‘GET’,’/server’,true);

2.方法 - send()

作用：通知xhr向服务器端发送请求

语法：send(body)

参数：

GET请求：body的值为null -> send(null)

POST请求：body的值为请求数据 -> send(“请求数据”)

3.属性 - readyState

作用：xhr状态，通过不同的xhr状态来表示xhr与服务器的交互情况

由0-4共5个值来表示5个不同的状态

状态	说明
0	代理被创建，但尚未调用 open() 方法。
1	`open()` 方法已经被调用。
2	`send()` 方法已经被调用，响应头也已经被接收
3	下载中； `responseText` 属性已经包含部分数据。
4	下载操作已完成

4.属性 - responseText

作用：响应数据

5.属性 - status

作用：服务器端的响应状态码

状态吗	说明
200	表示服务器正确处理所有的请求以及给出响应
404	请求资源不存在
500	服务器内部错误

6.事件 - onreadystatechange

作用：每当xhr的readyState发生改变的时候都要触发的操作；

也称作回调函数；当readyState的值为4且status值为200的时候，才可以获取响应数据

3.AJAX的操作步骤

1.GET请求

//1.创建xhr请求
var xhr = createXhr();
//2.创建请求 - open()
xhr.open('GET',url,asyn[true|false])
//3.设置回调函数（收到服务器返回的数据后要对页面进行局部刷新） - onreadystatechange
xhr.onreadystatechange = function(){
   
    if(xhr.readyState == 4 && xhr.status ==