Ajax\jQuery\JSON

最新推荐文章于 2024-08-13 09:40:14 发布

ziWz

最新推荐文章于 2024-08-13 09:40:14 发布

阅读量59

点赞数

文章标签： ajax javascript servlet Powered by 金山文档

本文链接：https://blog.csdn.net/m0_71540905/article/details/129314320

版权

Ajax:异步刷新技术

无刷新的情况下更新页面内容

只更新部分页面，有效利用带宽

提供连续的用户体验

提供类似C/S的交互效果，操作更方便

传统Web与Ajax的差异

发送请求方式不同

传统Web：浏览器发送同步请求

Ajax技术：异步引擎对象发送请求

服务器响应不同

传统Web ：响应内容是一个完整页面

Ajax技术：响应内容只是需要的数据

客户端处理方式不同

传统Web ：需等待服务器响应完成并重新加载整个页面后才能继续操作

Ajax技术：可以动态更新页面中的部分内容，不影响其他操作

XMLHttpRequest

Ajax技术的核心，用于与服务器进行交互

提供异步发送请求的能力

常用方法

方法名称	说明
open(String method, String url, boolean async, String user, String password)	创建一个新的HTTP请求
send(String data)	发送请求到服务器端
abort()	取消当前请求
setRequestHeader( String header, String value)	设置请求的某个HTTP头信息
getResponseHeader(String header)	获取响应的指定HTTP头信息
getAllResponseHeader()	获取响应的所有HTTP头信息

XMLHttpRequest对象的常用属性

属性名称	说明
onreadystatechange	设置回调函数，作为readyState属性值改变时的事件处理程序
readyState	XMLHttpRequest的状态码 0：XMLHttpRequest对象未完成初始化 1：XMLHttpRequest对象开始发送请求 2：XMLHttpRequest对象的请求发送完成 3 ：XMLHttpRequest对象开始读取响应 4：XMLHttpRequest对象读取响应结束
status	当前请求的HTTP状态码 200：正确返回404：找不到访问对象
status	返回当前请求的HTTP状态码
statusText	返回当前请求的响应状态
responseText	以文本形式获得响应的内容
responseXML	将XML格式的响应内容解析成 DOM对象返回

GET请求和POST请求的区别

不同步骤	请求方式	实现代码
初始化XMLHttpRequest对象	GET	xmlHttpRequest.open("GET", url, true);
初始化XMLHttpRequest对象	POST	xmlHttpRequest.open("POST", url, true); xmlHttpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
发送Ajax请求	GET	xmlHttpRequest.send(null);
发送Ajax请求	POST	xmlHttpRequest.send("name=xxx&age=20");

使用jQuery简化Ajax实现

传统方式实现Ajax的不足

步骤繁琐

方法、属性、常用值较多难以记忆

不便于处理XML格式等复杂结构的响应数据

存在浏览器兼容问题

jQuery将Ajax相关操作都进行了封装

settings是一组用于配置Ajax请求的键值对集合

settings参数常见属性

参数	类型	说明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式，默认为GET
data	PlainObject 或 String 或 Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true
beforeSend	Function (jqXHR jqxhr, PlainObject settings)	发送请求前调用的函数
success	Function( 任意类型 result, String textStatus, jqXHR jqxhr)	请求成功后调用的函数参数result：可选，由服务器返回的数据
error	Function (jqXHR jqxhr, String textStatus, String errorThrown)	请求失败时调用的函数
complete	Function (jqXHR jqxhr, String textStatus)	请求完成后（无论成功还是失败）调用的函数

$.ajax( { "url" : "/microblog/control/register", //要请求的URL路径 "type" : "POST", //发送请求的方式 "data" : "opr=checkUser&userTel="+$("#userTel").val(), //要发送到服务器的数据 "dataType" : "text", //指定响应的数据格式 "success" : function callBack(data) { //参数表示响应结果 if (data == "true") { //省略页面设置的代码 } else { //省略页面设置的代码 }} //响应成功后执行的代码 "error" : function() { //请求失败后执行的代码 alert("手机号验证时出现错误，请稍后再试！"); }} );

beforeSend参数

发送请求前调用的函数

使用场景