ajax异步请求实例 - 穆世明博客

1.什么是Ajax

1.1 一图胜千言

2.Ajax的通信原理

3.原生Ajax应用实例-验证用户名是否存在

4.JQuery操作Ajax

4.1 Ajax方法

4.1.1Ajax方法的应用实例

4.2 JQuery的get和post函数

4.2.1 get方法的应用实例

4.2.2 post方法的应用

4.3JQuery的getJSON方法

4.3.1 getJSON的方法应用

5.总结什么时候改用什么常用的方法

1. AJAX 即 "Asynchronous Javascript And XML"( 异步 JavaScript 和 XML)

2. Ajax 是一种浏览器 异步发起请求 ( 指定发哪些数据 ) ， 局部更新页面 的技术

重点是XHR创建 XHR请求 XHR响应！等

具体解释：如上图所示。

相对于传统的web应用。Ajax技术就是多了Ajax引擎也就是XMLHttpRequest对象。

当前端中的表单要发送数据给后端的时候，前端会首先创建一个XMLHttpRequest对象。

然后指定你要传送的数据，而非整个form表单。通过Http请求将数据发送给后端。

只不过XMLHttpRequest对象发送数据的时候是异步的！

什么是异步：就是当前端发送数据给后端时，前端界面不需要对响应进行等待挂机状态，前端界面依然可以做自己的事，这是很重要的。

后端界面通过Http响应发送给前端的XMLHttpRequest对象，再通过事件绑定机制，局部刷新前端界面！

简而言之呢，就可以看出Ajax引擎对象，作为两者数据交换的中间人，帮我完成异步局部刷新，指定发送数据等等操作！

1) 点击验证用户名 , 使用 ajax 方式，服务端验证该用户名是否是king是的话就说名用户已经占用输出对应的json数据

2) 对页面进行局部刷新 , 显示返回信息

具体结果如图所示

前端代码整个是在Tomcat中间键运行的

相应的具体文档信息：

原生的JQuery所存在的一些问题：

1. 编写原生的 Ajax 要写很多的代码，还要考虑浏览器兼容问题，使用不方便。(比如低版本你的Ajax引擎对象都创建不起来)

2. 在实际工作中，一般使用 JavaScript 的库 ( 比如 Jquery) 发送 Ajax 请求，从而解决这个

问题。

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

JQuery操作Ajax的文档 ：

1. $.ajax 常用参数

● url：请求的地址
● type : 请求的方式 get 或 post
● data : 发送到服务器的数据。将自动转换为请求字符串格式
● success: 成功的回调函数【就是当ajax请求被成功处理，且相应返回的时候】
● error: 失败后的回调函数
● dataType: 返回的数据类型常用 json 或 text【告诉Ajax对象数据类型，可以更好地处理数据】

4.1.1Ajax方法的应用实例

案例要求：

1) 点击验证用户名 , 使用 ajax 方式，服务端验证该用户名是否是king是的话就说名用户已经占用输出对应的json数据

2) 对页面进行局部刷新 , 显示返回信息

具体结果如图所示

和上面的原生案例一样的效果，只不过用JQuery的Ajax应用。

一些小细节：

1. //为了防止你发送json数据的时候浏览器会报错xml解析错误！，于是定义一个
resp.setContentType("text/json;charset=utf-8");//浏览器会优先支持text/html;text/xml版本，如果你不写的话，虽然你发送的是JSON数据，但是浏览器依然不会以JSON解析会出错。

2. JQuery使用Ajax操作时，后端发回给前端一个JSON字符串，在Ajax方法中的succcess属性中的data参数会将JSON字符串自动转换成JSON对象。

前端界面展示：

后端代码：

1. $.get 和 $.post 常用参数

● url: 请求的 URL 地址
● data: 请求发送到服务器的数据
● success: 成功时回调函数
● dataType: 返回内容格式，xml, html, script, json, text

2. 说明：$.get 和 $.post 底层还是使用$.ajax()方法来实现异步请求

4.2.1 get方法的应用实例

还是上述列子只改变前端代码

细节说明

1. $.get()默认是get请求，不需要指定请求的方式

2. 不需要指定参数名

3. 填写的实参顺序是 url,data,success回调函数，返回的数据格式

4.2.2 post方法的应用

就当对于上述的get方法只改变方法名即可，其余的都一样

1. $.getJSON 常用参数

● url: 请求发送的哪个 URL
● data: 请求发送到服务器的数据
● success: 请求成功时运行的函数

2. 说明： $.getJSON 底层使用 $.ajax() 方法来实现异步请求

4.3.1 getJSON的方法应用

相较于get和post请求更简洁少了dataType的属性！

一般情况下用get和post方法，因为参数更少更简洁

如果是get请求返回的格式是JSON的最适合的是getJSON方法

Ajax方法比较大，参数很多，当然适用于所有范围，你习惯用的话也可以用

本文章通过学习老韩视频的学习心得，如有版权问题，博主会及时删除。

欢迎小伙伴去看老师视频

上一篇：哈夫曼树及哈夫曼编码pta

下一篇： cython cdef

版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/14118.html

4.1.1Ajax方法的应用实例

4.2.1 get方法的应用实例

4.2.2 post方法的应用

4.3.1 getJSON的方法应用

相关文章：