开发工具与关键技术:Vs JavaScript jQuery
作者:王民
撰写时间:2020年5月5日
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图等等
异步:是指进程不需要一直等下去,
而是继续执行下面的操作,不管其他进程的状态。
当有消息返回时系统会通知进程进行处理,
这样可以提高执行的效率
运用HTML与CSS来实现页面,表达信息
运用XMLHttpRequest和web服务器进行数据的异步交换
AJAX - 向服务器发送请求
向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
参数说明:
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)Asynchronous
send(string):将请求发送到服务器。
jQuery中的$.ajax({settings})方法
.
a
j
a
x
(
s
e
t
t
i
n
g
s
)
;
t
y
p
e
:
类
型
,
"
P
O
S
T
"
或
"
G
E
T
"
,
默
认
值
为
"
G
E
T
"
u
r
l
:
发
送
请
求
的
地
址
a
s
y
n
c
:
设
置
异
步
,
(
默
认
:
t
r
u
e
)
默
认
设
置
下
,
所
有
请
求
均
为
异
步
请
求
。
如
果
需
要
发
送
同
步
请
求
,
请
将
此
选
项
设
置
为
f
a
l
s
e
。
注
意
,
同
步
请
求
将
锁
住
浏
览
器
,
用
户
其
它
操
作
必
须
等
待
请
求
完
成
才
可
以
执
行
。
d
a
t
a
:
是
一
个
对
象
,
连
同
请
求
发
送
到
服
务
器
的
数
据
d
a
t
a
T
y
p
e
:
预
期
服
务
器
返
回
的
数
据
类
型
,
如
果
不
指
定
,
j
Q
u
e
r
y
将
自
动
根
据
h
t
t
p
包
M
I
M
E
信
息
来
智
能
判
断
,
一
般
我
们
采
用
j
s
o
n
格
式
,
可
以
设
置
为
"
j
s
o
n
"
s
u
c
c
e
s
s
:
是
一
个
方
法
,
请
求
成
功
后
的
回
调
函
数
,
传
入
返
回
后
的
数
据
,
以
及
包
含
成
功
代
码
的
字
符
串
e
r
r
o
r
:
是
一
个
方
法
,
请
求
失
败
是
调
用
此
函
数
,
传
入
X
M
L
H
t
t
p
R
e
q
u
e
s
t
对
象
j
Q
u
e
r
y
中
的
.ajax({settings}); type:类型,"POST"或"GET",默认值为"GET" url:发送请求的地址 async:设置异步,(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求, 请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 data:是一个对象,连同请求发送到服务器的数据 dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据http包MIME信息来智能判断, 一般我们采用json格式,可以设置为"json" success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串 error:是一个方法,请求失败是调用此函数,传入XMLHttpRequest对象 jQuery中的
.ajax(settings);type:类型,"POST"或"GET",默认值为"GET"url:发送请求的地址async:设置异步,(默认:true)默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。data:是一个对象,连同请求发送到服务器的数据dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据http包MIME信息来智能判断,一般我们采用json格式,可以设置为"json"success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串error:是一个方法,请求失败是调用此函数,传入XMLHttpRequest对象jQuery中的.get()方法
语法:$.get(url, [data], [callback], [type])
描述:通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
参数说明:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery中的
.
p
o
s
t
(
)
方
法
语
法
:
.post()方法 语法:
.post()方法语法:.post(url, [data], [callback], [type])
描述:通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
参数说明:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery中的
.
g
e
t
J
S
O
N
(
)
方
法
语
法
:
.getJSON()方法 语法:
.getJSON()方法语法:.getJSON(url, [data], [callback])
描述:通过 HTTP GET 请求载入JSON数据
参数说明:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。