AJAX
时间:2019-10-26
本文章向大家介绍AJAX,主要包括AJAX使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.AJAX简介
- AJAX:Asynchronous JavaScript And XML;异步JavaScript和XML
- 它是一种日渐流行的web编码格式,不是一种新的编码语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术,是基于JavaScript、XML、HTML、CSS 的新用法。
- AJAX是一种用来改善用户体验的技术,本质是使用XMLHttpRequest对象 异步地像服务器发送请求,并且发送请求的同时浏览器并不销毁页面,可以继续进行页面的操作,在服务器收到请求之后会返回部分数据,而不是一个完整的页面。浏览器接收到这些部分数据之后会以页面无刷新的效果更改页面中的局部内容。
2.同步和异步
- 传统的web交互模式:同步
- 同步:提交请求--等待服务器处理--处理完毕返回,这个期间客户端浏览器不能干任何事
- AJAX支持的web交互模式:异步
- 异步:请求通过AJAX事件触发--交给服务器处理(浏览器仍然可以做其他事情)--处理完毕
3.AJAX编码步骤
(重要)
- 创建XMLHttpRequest对象
- 注册状态监控回调函数
- 建立与服务器的异步连接
- 发出异步请求
4.详解XMLHttpRequest
4.1创建XMLHttpRequest对象
- 不同的浏览器提供不同的支持
- 所有现代浏览器(Chrome、Firefox、Safari、Opera以及IE7+)均内建XMLHttpRequest对象。
- var xhr = new XMLHttpRequest();
- 老版本的Internet Explorer(IE5、IE6)使用ActiveX对象
- var xhr = new ActiveXObject("Microsoft.XMLHTTP");
- 所有现代浏览器(Chrome、Firefox、Safari、Opera以及IE7+)均内建XMLHttpRequest对象。
- 代码示例:
-
function getXHR(){ var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; }
4.2XMLHttpRequest对象的属性
- readyStatus:请求的状态,类型short,只读。
- 0:XMLHttpRequest对象被创建了
- 1:建立与服务器的连接,但是请求没有发出去。
- 2:发出了请求,但是服务器没有任何响应
- 3:接收到了服务器的响应,接收到了服务器发出的响应消息头时。
- 4:接收到了服务器发送的响应正文,响应结束。
- responseText:响应正文内容,字符串类型,只读。
- responseXML:响应正文内容,可以当做DOM处理。类型Document,只读。
- status:响应状态码,类型short,只读。
- 200:请求成功。
- 202:请求被接受但处理未完成
- 400:错误的请求。
- 404:资源未找到
- 500:内部服务器错误
- statusText:响应码描述,类型字符串,只读。
4.3XMLHttpRequest对象的方法
- abort():取消请求
- getAllResponseHeader():获取响应的所有HTTP头。字符串类型。
- getResponseHeader(var headerName):获取指定的HTTP头。字符串类型。
- open(var method, var url, boolean isAnsy)建立连接
- method:请求方式(GET/POST)
- url:请求地址
- isAnsy:同步还是异步。默认是true,表示异步。
- send(var data ):向服务器发送请求消息头。
- GET请求,传入null
- POST请求,
- setRequestHeader(var headerName, var headerValue)向服务器发送请求消息头。
4.4XMLHttpRequest对象的状态监听器
- onreadystatechange:事件处理器
- 指向一个函数(回调函数)
- 触发时机:每次XMLHttpRequest对象的readyState发生变化都会触发。
- 示例代码:
xhr.onreadystatechange = function(){ if(xhr.readyState==4){ if(xhr.status==200){ //JavaScript 之 DOM、 BOM 编程 } } }
5.服务器返回XML
5.1XStream简介
- XStream是一个简单类库,用来转换Java对象成为XML和转换XML成为Java对象。
- 官网:http://xstream.codehaus.org/
- 解析XML需要jar包
- xstream-1.3.1.jar
- xpp3_min-1.1.4c.jar(xml pull)
5.2使用XStream
- 创建XStream对象
- 将特殊类型进行别名设置
- xs.alias("provinces", List.class);
- xs.alias("province", Province.class);
- 将对象转为XML
- String xml = xs.toXML(provinces);
- String xml = xs.toXML(provinces);
- XStream Annotation
- @XStreamAlias(aliasName): 对类和变量设置别名。
- @XStreamAsAttribute: 设置变量生成属性。
- @XStreamOmitFiel: 设置变量不生成到 XML。
- @XStreamImplicit(itemFieldName = "hobbies"): 设置集合类型变量别名。
- 在XStream生成XML时使用注解
- xs.autodetectAnnotations(true);
- xs.autodetectAnnotations(true);
附录:参考页面:ajax:https://www.w3school.com.cn/ajax/ajax_intro.asp
xstream:https://baike.baidu.com/item/Xstream/7626000?fr=aladdin
原文地址:https://www.cnblogs.com/abug/p/11744116.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 实现 Base64 的编码解码
- Android实现底部导航栏的主界面
- Spring注解@Autowired源码分析
- 使用RecyclerView实现水平列表
- android实现记住用户名和密码以及自动登录
- Android碎片fragment实现静态加载的实例代码
- android异步消息机制 源码层面彻底解析(1)
- /undefinedcss/modules/layer/default/layer.css?v=3.1.1找不到的问题
- Android实现渐变启动页和带有指示器的引导页
- the input device is not a TTY. If you are using mintty, try prefixing the comma
- 【STM32F407】第13章 RL-TCPnet V7.X之创建多个TCP客户端
- RecyclerView实现列表倒计时
- wsl设置默认账户为root(ubuntu18.04)
- LeetCode No.14 最长公共前缀
- android异步消息机制 从源码层面解析(2)