Ajax:
* Ajax概述:* Ajax的原理
* 什么是Ajax
* 异步和同步
* 同步:
* 客户端页面向服务器端发送请求,直到服务器端将响应发送回来,这个过程中,页面是不能做任何事情。
* 异步:
* 客户端页面向服务器端发送请求,直到服务器端将响应发送回来,这个过程中,页面可以去做任何事情。
* Ajax的定义:
(不严格)客户端与服务器端进行交互,而无需刷新当前页面的技术.
* 作用:
* 可以实现同步交互所不能完成的功能,提高同步实现的效果。
* 页面减少了,只用一个页面即可。
* 缺点:
* 小则怡情,大则伤身(Ajax的异步实现不能过多使用)
* Ajax的原理:参考PPT P6
* Ajax的对象:
* Ajax的核心对象:XMLHttpRequest(XHR)对象
* IE使用的是XMLHTTP对象
* 浏览器兼容性:
* 判断当前用户的浏览器是IE还是其他浏览器
* 创建Ajax对象:
if(window . XMLHttpRequest){
//其他浏览器
xhr = new XMLHttpRequest();
}else{
//IE8以上
xhr = new ActiveXObject('Microsoft . XMLHttp');
}
* Ajax对象的属性和方法
* 方法
* open( method, url, async )方法:向服务器端创建一个请求
* method参数:指定当前请求的方式,GET和POST。
* url参数:指定当前请求的服务器端地址。
* async参数:指定当前请求是否为异步,Boolean值。
* true:表示的是异步。
* false:表示的是同步,目前W3C的最新规范不建议使用同步。
* send()方法:发送请求的参数。
* 参数:请求参数
* 属性
* readyState:请求的状态
* 0 - 尚未初始化
* 1 - 正在发送请求
* 2 - 请求完成
* 3 - 正在响应
* 4 - 响应完毕
* status:服务器端返回的状态码
* 404 - 找不到网页
* 200 - OK
* 302 - 请求转发
* 304 - 请求缓存
* 500 - 内部服务器错误
* responseText:表示的是服务器端返回的文本内容。
* responseXML:表示的是服务器端返回的XML格式内容。
* 事件
* onreadystatechange:用于监听服务器端的状态变化
* 当readyState属性的值变化时,会触发onreadystatechange事件
* Ajax的作用:
* GET请求:
* 创建Ajax的核心对象:略
* 创建请求:
open( method , url ):
* 如果GET方式的话,请求参数需要添加在URL后面
* 发送请求
send()方法:
* 如果GET方式的话,send( null )
* 接收响应
onreadystatechange事件
readyState和status属性:
* readyState属性:Ajax从请求到响应的整个过程
* status属性:告诉我们Ajax请求是否成功
* responseText属性:接收服务器端的响应
* POST请求:(与GET方式的区别)
* open()方法中的method参数为POST
* 如果请求方式为POST的话,send()方法可以发送请求参数
* 设置请求头信息:
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* Ajax的应用
* XML
* 概述:
* XML译为可扩展标记语言,全称eXtensible Markup Language。
* 发展过程:
* 基于XML基础上,出现XHTML语言 - 替代HTML。
* XHTML 发展到2.0,XML野心破灭了。
* 作用:
* 用于数据的存储(数据的传输 -请求和响应)
* 用于配制文件(了解)
* 特点:
* 使用标签,XML的标签允许自定义的。
* 标签同样具有文本和属性。
* XML解释:利用DOM解析
* 语法:
* XML文件的扩展名为".xml"
* XML声明:
* 注意:
* 声明必须从文档的0行0列位置开始
* 声明必须为<?xml开头,以?>结束
* 属性:
* version属性:表示当前XML文件的版本,固定为1.0.
* encoding属性:表示当前XML文件的编码。
* 元素
* XML标签对大小写敏感。
* 元素具有属性和文本,包含其他元素。
* 属性:
* 属性值必须用引号引起来,单双引号均可使用。
* XML应用:
* JavaScript解析XML
* 使用JavaScript中的DOM(XML DOM)解析XML
* 通过XML DOM对象解析对应的XML内容:
* 其他浏览器
var parser = new DOMParser();
parser.parseFromString( xml, type );
* xml参数:指定当前要解析的XML名称。
* type参数:指定当前要解析的XML类型。("application/xml"或"text/xml")
* 返回值:表示解析XML后得到可以被DOM解析的内容。
* IE浏览器
var xmlDoc = new
ActiveXObject("Microsoft.XMLDOM");
* 利用DOM解析XML:
* getElementById()和getElementsByName()方法不能使用。
* getElementsByTagName()方法是有效的。
* 注意:
* 目前W3C最新规范不允许读取本地的XML文档,只能读取XML格式的字符串。
* 之前的W3C规范是允许读取本地的XML文档。
* Ajax解析XML
* Ajax的请求参数与响应数据更改为XML格式。
* 请求参数的格式为XML:
* 参数的类型依旧是字符串类型。
* 该字符串的内容为XML格式。
* 响应数据的格式为XML:
* 在Ajax中使用xhr对象的responseXML属性接收。
* (推荐)接收的数据格式已经是可以解析的XML格式,不需转换。
* 使用responseText来接收,利用XML解析器手动转换。
* 利用XML DOM解析
* JSON
* 概述:* 定义:是一种轻量级的数据交换格式。
* 特点:
* 易于程序员阅读
* 易于计算机解析
* 用途:用于数据交换
* 结构:
* JavaScript Object:{ key : value }
* JavaScript Array:[ 1,2,3,4 ]
* JSON文件的扩展名为".json"
* 使用:
* JavaScript中如何解析JSON格式:
* eval()方法:将JSON格式的字符串转换成Object或Array。
* 注意:eval("("+JSON格式的字符串+")")
原因:不加"()"时,可能导致JSON的转换失败。
* JSON.parse()方法:将JSON格式的字符串转换成Object或Array。
* JSON.stringify( jsObj )方法:将Object或Array转换成JSON格式的字符串
* 注意:IE 7 不能使用JSON.parse()和JSON.stringify()
* 应用:
* Ajax中使用JSON(二级联动)
* Ajax的增强操作
* jQuery对Ajax的支持* 第一组:最基本的用法,最复杂
* $.ajax( url, [setting] )方法
* 第二组:
* load( url, [data], [callback] )方法
* $.get( url, [data], [callback], [type] )方法
* 该方法要求请求方式必须是GET
* $.post( url, [data], [callback], [type] )方法
* 该方法要求请求方式必须是POST
* 第三组(了解):
* $.getScript( url, [callback] )方法
* 作用:动态读取JavaScript脚本代码
* $.getJSON( url, [data], [callback] )方法
* 作用:
* 只是用于读取JSON格式的数据内容
* 解决Ajax的跨域请求(了解) —— JSONP模式
* 表单操作
* Ajax中的表单提交:
* 不能再使用表单的submit事件
* 为button增加onclick事件,处理函数中进行Ajax异步请求
* 问题:
* 如何获取表单中所有的元素值。(元素过多时)
* 实现Ajax提交表单的步骤:
* 使用getElementById()或jQuery获取表单中所有的元素值
* 问题:表单中具有多少元素内容(元素越多,获取越复杂)
* 将获取的所有元素值进行拼串(文本、XML和JSON)
* 问题:必须要面对字符串的拼串(极容易出错)
* 使用Ajax异步提交表单
* 表单的序列化:
* 定义:从关注表单中的元素,到只关注表单本身,通过表单的序列化得到对应表单中的所有元素值。
* 表单序列化:(jQuery)
* serialize()方法:将指定的表单元素序列化成JSON格式的字符串
* serializeArray()方法:将指定的表单元素序列化成JSON格式的数组
* 注意:
* 序列化表单元素,元素具有name属性。
* 表单具有多选框的话,直接序列化表单时:结果是不正确的。
* jQuery.form插件:
* ajaxForm()方法:用于表单验证的方法(不能提交表单)。
* (只使用)ajaxSubmit()方法:用于提交表单。
* url
* type
* dataType
* beforeSubmit:function
* 提交表单之前完成的功能
function(fromData,jqFrom,options){}
* formData:表单中元素的值(数组)
* jqForm:表单的jQuery对象
* success:function
* 提交表单成功后的回调函数
function(responseText,statusText){}
* responseText:服务器端响应的数据内容
* statusText:请求状态
* 标准化的Ajax - RESTful
* Http协议的四个请求方式:GET - 获取资源
POST - 新建资源
PUT - 修改或更新资源
DELETE - 删除资源
* 客户端向服务器端发送的请求链接:
GET http://www.xxx.com/users - 获取服务器端users资源
GET http://www.xxx.com/users/13 - 获取服务器端users资源中的id为13的用户信息