JQuery中Ajax应用

 

1 定义:客户端js发起的http请求的代号 无刷新的数据更新(不能跨域访问)

2 使用:高复发
　　同步代码:按钮按下==>>执行耗时操作==>>等待执行返回 解决方案(使用多线程)
　　异步代码:按钮按下==>>执行耗时操作==>>不等待执行返回

3 优缺点

　　优点:

　　　　兼容性好(无需插件,浏览器只需要支持js即可)
　　　　用户体验好(不更新页面的前提下维护数据,提高了应用程序的效率)
　　　　提高了web程序的性能(传统:使用表单提交数据,靠刷新页面来获取信息,ajax:通过xmlhttprequest提交,按需发送)
　　　　减轻服务器和带宽负担(将某些服务器负担转移到客户端,便于客户端资源来处理)
　　缺点:

　　　　可能破坏浏览器的后退按钮的正常行为
　　　　对搜索引擎的支持不足
　　　　开发调试工具缺乏
　　　　手持设备支持性差

4 XMLHttpRequest对象

　　属性:

　　　　 readyState:http请求状态 从0开始到4结束
　　　　responseText:响应体,不包括头
　　　　responseXML:响应请求,解析为xml,作为document返回
　　　　status:http状态码

　　方法:

　　　　abort():取消当前响应,关闭连接并结束未决网络活动
　　　　getAllRespomseHeaders():把http响应头作为未解析字符串返回
　　　　getResponseHeader():http响应头的值
　　　　open():初始化http请求的参数
　　语法:

　　　　open(method,url,async,username,password)
　　　　method:请求的方法
　　　　url:请求的地址
　　　　async:是否异步 true/false
　　　　username/password:可选参数,保证服务安全
　　　　send(body):发送http请求,传递open()方法的参数
　　　　setRequestHeader():向一个打开但未发送的请求设置或添加http请求

　　事件:onreadystatechange

5 JavaScript中Ajax

　　创建过程:httpRequest请求对象==>>打开连接==>>监控状态==>>发送请求
　　js中文件域不同解决方案:将Ajax文件移到同一个服务器中
　　局限:js中的http请求不能跨域

6 jQuery中Ajax

　　发展
　　　　1) $.ajax()
　　　　2) load(),$.get(),$.post()
　　　　3) $.getScript(),$.getJson()

　　load(url,[data],[callback])
　　　　1) 加载制定html文件
　　　　2) 筛选载入的html文档 语法:load(url selector)
　　　　3) 传递方式 根据data自动指定
　　　　4) 回调参数:无论请求是否成功,当请求完成后回调函数就被触发

　　jQuery.get()与jQuery.post()
　　　　$.ajax(options)
　　　　　　参数
　　　　　　　　url:发送请求地址
　　　　　　　　type:请求方式(get/post)
　　　　　　　　timeout:设置请求超时时间
　　　　　　　　data:数据
　　　　　　　　dataType:服务器返回的数据
　　　　　　　　beforeSend(xmr):发送请求前可修改xmlhttprequest对象函数
　　　　　　　　success():请求成功后的回调函数
　　　　　　　　error():请求失败时调用的函数
　　　　　　　　complete(XHR,TS):请求完成后调用的函数
　　　　　　　　async:请求异步
　　　　　　　　cache:页面是否缓存
　　JSON
　　　　ajax中数据都是以json方式储存和传输的
　　　　数据以键值对的形式存储

　　序列化元素
　　　　serialize():序列表表格内容为字符串
　　　　serializeArray():序列表表格内容是将dom元素序列化,返回json对象格式的数据
　　　　$.param():对数组或对象按键值对进行序列化
　　　　serialize():序列表表格内容为字符串
　　　　serializeArray():序列表表格内容是将dom元素序列化,返回json对象格式的数据
　　　　$.param():对数组或对象按键值对进行序列化