邹哥教你学习Ajax

天才是百分之一的灵感,百分之九十九的血汗。——爱迪生

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,

AJAX技术包括以下几种技术。

JavaScript(绑定所有技术)

XML、XSLT(数据交换)

XMLHttpRequest(异步数据查询、检索)

DOM (动态显示及交互)

DHTML(基于浏览器的页面)

CSS(页面样式)

其中Ajax的核心对象是XMLHTTPRequest对象,这个对象包含很多常用的属性和方法。

常用方法:

open(method,URL,async):建立与服务器的连接

method参数指定请求的HTTP方法,典型的值是GET或POST

url参数指定请求的地址

async参数指定是否使用异步请求,其值为true或false

send(content) :发送请求

content参数指定请求的参数

setRequestHeader(header,value):设置请求的头信息

常用属性:

onreadystatechange:指定回调函数

readystate: XMLHttpRequest的状态信息

status: http的状态码

timeout : 设置XMLHttpRequest请求的超时时间

responseType : 设置响应返回的数据格式

responseText:获得响应的文本内容

responseXML:获得响应的XML文档对象

如何使用Ajax

jQuery Ajax简化Ajax请求

$.ajax(options) 返回的是XMLHttpRequest对象

options (可选) : AJAX 请求设置。key/value方式

常见选项设置如下:

type --- 请求方式,默认为GET

url --- 请求资源的URL

data --- 请求参数信息 key/value

success --- 回应成功的回调函数

error --- 回应失败的回调函数

$.get(url,[data],[callback])

url 请求资源的URL

data 请求参数信息 key/value

callback 载入成功时回调函数

$.post(url,[data],[callback])

url 请求资源的URL

data 请求参数信息 key/value

callback 发送成功时回调函数

使用jQuery Ajax实现同一页面的CURD

页面效果参考:

js代码参考:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180129G0X6SP00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券