好处

  • 无刷新:不刷新整个页面,之刷新局部
  • 无刷新的好处

    • 只更新部分页面,有效利用带宽
    • 提供连续的用户体验
    • 提供类似C/S的交互效果,操作更方便

传统Web与Ajax的差异

差异方式说明
发送请求方式不同传统Web Ajax技术浏览器发送同步请求 异步引擎对象发送请求
服务器响应不同传统Web Ajax技术响应内容事一个完整的页面 响应内容只是需要的数据
客户端处理方式不同传统Web Ajax技术传统Web Ajax技术可以动态更新页面中的部分内容 不影响用户在页面进行其他操作

Ajax:异步刷新技术

XMLHttpRequest

  • 整个Ajax技术的核心
  • 提供异步发送请求的能力
  • 常用方法
方法说明
open(String method,String url,boolean async,String user,String password)创建一个新的HTTP请求
send(String data)发送当前请求
abort()取消当前请求
  • 常用属性

    • status:HTTP的状态码
状态码说明
200正确返回响应
404请求的资源不存在
500服务器内部错误
403没有访问权限
  • staatusText:返回当前请求的响应状态
  • responseText:以文本形式获得响应的内容
  • responseXML:将XML格式的响应内容解析成DOM对象返回

使用Ajax验证用户名

  • 使用文本框的onblur时间
  • 使用Ajax技术实现异步交互

    • 通过XMKLHttpRequest对象
    • 通过XMLHttpRequest对象设置请求信息
    • 向服务器发送请求
    • 创建回调函数,工具响应状态动态更新页面
    • 编写服务器端处里客服端请求

$.ajax()简介

  • 语法
$.ajax([settings])
  • 常用属性参数
参数类型说明
urlString发送请求的参数,默认为当前页地址
typeString请求方式,默认为GET
dataPlainObject String Array发送到服务器的数据
data TypeString预期服务器返回的数据类型,包括:xml,HTML Script JSON JSONP text

常用函数参数

参数类型说明beforeSendFunction(jqXHR jqxhr,PlainObject settings)发送请求前调用的函数successFunction(任意类型 result,String textStatus,jqXHR jqxhr)请求成功后调用的函数参数result:可选,由服务器返回的数据。error请求失败的调用函数complete请求完成后调用的函数

认识JSON

JSON

  1. 一种轻量级的数据交互格式。
  2. 采用独立于语言的文本的文本格式
  3. 通常用于在客户端和服务器之间传递数据
  4. JSON的优点
  5. 轻量级交互语言
  6. 结构简答
  7. 易于解析

定义JOSN

定义JSON对象

语法

var json对象 = {“name”:value}

定义JSON数组

语法

var JSON数组=[value ,value,....];
文章结束 感谢阅读
本文作者: 文章标题:理解Ajax
本文地址:https://lmwa.cn/archives/37.html
版权说明:若无注明,本文皆田小檬博客原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以赞助本站,使本站更好的发展