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

posted @ 2013-12-20 21:33  ◆◇▁演绎、  阅读(138)  评论(0编辑  收藏  举报