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():对数组或对象按键值对进行序列化