转载:https://blog.csdn.net/jinixin/article/details/80042763
1. 概述
Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量数据,通过javascript DOM更新一部分节点。期间数据传输可采用xml,json等格式,Ajax最早用于谷歌的搜索提示。
其实不刷新整个页面便可与服务器通信的方法很多,比如Flash,Java applet,iframe等,但Ajax是目前最常见的一种。
我们可以用javascript扩展对象XMLHTTPRequest实现Ajax,对于这种方法在这里不做介绍,下面直接了解jquery实现Ajax的几种方法。
2. 数据格式
浏览器与服务器之间传输数据所采用的格式,比较常见的有xml,html,text,json,jsonp等,目前json由于占用更小存储,且是javascript原生格式,因此很受欢迎。
当确定数据传输采用json格式后,下面就需要考虑序列化问题了。
网络汇总传输的都是文本字符串(其实是二进制比特流),因此在想网络通道中写入数据时,都需要先序列化json对象为文本字符串。而从我拿过来通道中读取数据时,都需要反序列化文字符串为json对象。
如果确定数据格式是json,js也需要对服务器返回的数据进行反序列化,即把json样式的字符串变成json对象。
var json_str = '{"result": "hello, world!"}';
var json_object = eval("(" + json_str + ")"); // 法一,使用eval函数,注意括号
var json_object = jQuery.parseJSON(json_str); // 法二,使用jQuery的parseJSON函数
console.log(json_object.result); // hello, world! 反序列化成功,输出结果
3. $.ajax()
形式:$.ajax({ url : " ", ...})
字段解释:
1. url:链接地址,字符串表示
2. data:需要发送到服务器的数据,get、post都可以。
3. type:请求类型,“POST”或“GET”,默认“GET”
4. timeout:请求超时时间,单位为毫秒
5. cache:是否缓存请求结果,Boolean表示,默认为true
6. contentType:默认 "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
7. dataType:服务器响应的数据类型,字符串表示。当填写为json时,回调函数中无需在对数据反序列化为json。
8. success:请求成功后,服务器的回调函数
9. error:请求失败后,服务器的回调函数
10. complete:请求完成后调用的函数,无论请求失败还是成功,都会调用该函数。
11. async:是否异步处理,Boolean表示,默认true。若设置为false,js不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行。
12. username:访问认证请求中携带的用户名,字符串表示
13. password:返回认证请求中携带的密码,字符串表示
$.ajax({
url: "/greet",
data: {"username": name},
type: "POST",
dataType: "json",
success: function(data) {
// data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型,故不需要再反序列化
...
}
});
4. $.post()
该方法使用POST方式执行Ajax请求,从服务器加载数据
形式:$.post(url,data,func,dataType)
参数解释:
1. url:链接地址
2. data:需要发送到服务器的数据
3. func:请求成功后,服务器回调的函数。function(data , status , xhr),其中data为数据服务器回传的数据,status为响应状态,xhr为XMLHTTPRequest对象。
$.post(
"/greet",
{name: 'Brad'},
function(data) {
...
},
"json"
);
5. $.get()
该方法使用get方式执行ajax请求,从服务器加载数据
形式:$.get(url , data , func , dataType)
其各个参数所示意义与$.post()一致。
$.get(
"/greet",
{name: 'Brad'},
function(data) {
...
},
"json"
);
以上三个是jquery中发送Ajax请求较为重要的方法,下面再选择三个较为常见的方法。
6. $.getJSON()
该方法使用GET方式执行Ajax请求,从服务器加载JSON格式数据。
形式:$.getJSON(url, data, func);
因为确定服务器返回json编码的数据,故相较于$.get()不必再指定dataType。
$.getJSON(
"/greet",
{name: 'jenny'},
function(data) {
...
}
);
7. $.load()
该方法将服务器加载的数据直接插入到指定DOM中。
形式:$.load(url, data, func);
其中data如果存在则使用POST方式发送请求,不存在则使用GET方式发送请求。
<div id="ret"></div>
$('#ret').load(
"/greet",
{name: 'Brad'}
);
8. $.getScript()
该方法使用GET方式执行Ajax请求,从服务器加载并执行回传的JavaScript。
形式:$.load(url, func);
代码
下面使用Python Flask与jQuery对这6个Ajax方法做简单演示,jQuery为1.11.3版本。
后端Python:
#!/usr/bin/env python
# coding=utf-8
import json
from flask import Flask, request, render_template as rt
app = Flask(__name__)
@app.route('/', methods=['GET'])
def index():
return rt('greet.html')
@app.route('/greet', methods=['GET', 'POST'])
def greet():
# GET上传的数据用request.args获取,POST上传的数据用request.form获取
if request.method == 'GET':
name = request.args.get('name')
ret = {'result': 'hi, %s' % name}
else:
name = request.form.get('name')
ret = {'result': 'hello, %s' % name}
return json.dumps(ret)
if __name__ == '__main__':
app.run(debug=True)
前端:
<html>
<body>
<button οnclick="login1()">发送1</button>
<button οnclick="login2()">发送2</button>
<button οnclick="login3()">发送3</button>
<button οnclick="login4()">发送4</button>
<button οnclick="login5()">发送5</button>
<div id="ret"></div>
<script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
<script type="text/javascript">
function login1() {
$.ajax({
url: "{{ url_for('greet') }}",
data: {name: 'jenny'},
type: "POST",
//dataType: "json",
success: function(data) {
// data = eval("(" + data+ ")");
data = jQuery.parseJSON(data); // dataType注释了,故注意反序列化
$("#ret").text(data.result);
}
});
}
function login2() {
$.get(
"{{ url_for('greet') }}",
{name: 'Brad'},
function(data) {
$("#ret").text(data.result);
},
"json"
);
}
function login3() {
$.getJSON(
"{{ url_for('greet') }}",
{name: 'jenny'},
function(data) {
$("#ret").text(data.result);
}
);
}
function login4() {
$.post(
"{{ url_for('greet') }}",
{name: 'Brad'},
function(data) {
$('#ret').text(data.result);
},
"json"
);
}
function login5() {
$('#ret').load(
"{{ url_for('greet') }}",
{name: 'Brad'}
);
}
</script>
</body>
</html>