flyFish's recorder.

Ajax 使用总结

ajax jquery angular js
2018/05/30 Share

ajax可以说是很基本也很nice的功能，自己在使用中发现，ajax在js，jquery与angular中非常相似，又有区别，这里统一整理下

  • ajax介绍
  • js使用
  • jquery使用
  • angular（$http）使用

ajax介绍

AJAX = Asynchronous JavaScript 和 XML（当然，可以传递特殊的字符串：json）。

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

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

js使用

异步的核心对象：XMLHttpRequest(XHR)。

1
通过获取核心对象，调用其api，回调做成功数据处理。

获取XMLHttpRequest对象。

1
2
3
4
5
6
7
8
9
10
var  xmlhttp; 
if  (window.XMLHttpRequest)  
{  
	// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码  
	xmlhttp=new  XMLHttpRequest(); }
else  
{  
	// IE6, IE5 浏览器执行代码  
	xmlhttp=new  ActiveXObject("Microsoft.XMLHTTP"); 
}

调用api，设置请求参数，回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//状态回调函数，当ajax执行流程为4，并且http请求状态码为200，异步成功
xmlhttp.onreadystatechange=function()  {  
	if  (xmlhttp.readyState==4 && xmlhttp.status==200)  {  
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
	}  
}  
//规定请求的类型、URL 以及是否异步处理请求。
//get
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); 
//请求发送
xmlhttp.send();

//post
xmlhttp.open("POST","/try/ajax/demo_post2.php",true); 
//设置请求头，传递url格式的数据，&与=连接
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//发送数据
xmlhttp.send("fname=Henry&lname=Ford");

补充一下，返回值也可为responseXML，可在js中进行解析，还是responseText多一些。

jquery

load

从服务器加载数据，并把返回的数据放入被选元素中，需要由元素调用，不太灵活，用的较少，了解一下就行。

1
$(selector).load(URL,data,callback);
  • 必需的 URL 参数规定您希望加载的 URL。
  • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  • 可选的 callback 参数是 load() 方法完成后所执行的函数名称。 
1
2
3
4
5
6
7
8
9
10
11
$("button").click(function(){ 
	//responseTxt 包含调用成功时的结果内容
	//statusTXT 包含调用的状态
	//xhr 包含 XMLHttpRequest 对象
	$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){  
		if(statusTxt=="success")  
			alert("外部内容加载成功!"); 
		if(statusTxt=="error")  
			alert("Error: "+xhr.status+": "+xhr.statusText); 
	}); 
});

get/post

两个常用的get/post请求方式，js提供的便捷方式。

get

1
$.get(URL,callback);

callback 参数是请求成功后所执行的函数名。 

1
2
3
4
5
6
$("button").click(function(){ 
	//第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。 
	$.get("demo_test.php",function(data,status){  
		alert("数据: " + data + "\n状态: " + status); 
	}); 
});

post

1
$.post(_URL,data,callback_);
  • 必需的 URL 参数规定您希望请求的 URL。
  • 可选的 data 参数规定连同请求发送的数据。
  • 可选的 callback 参数是请求成功后所执行的函数名。
1
2
3
4
5
6
7
$("button").click(function(){ 
	$.post("/try/ajax/demo_test_post.php", 
	{  name:"菜鸟教程", url:"http://www.runoob.com"  }, 
	function(data,status){  
		alert("数据: \n" + data + "\n状态: " + status); 
	}); 
});

ajax

jquery提供了通用的方式 $.ajax，开发者可以通过多项配置来实现自己的需求。

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({  
	type:"POST",  
	async: true,  
	//可以直接拼在url后，或者配置data
	url: '<%=basePath%>article/readArticle.do?nId=' + nId, 
	//data: {nId:1}, 
	success: function(data){  
		if(data.nRes == 1){  
			alert("您已完成此篇文章的阅读！");  
		}  
	}  
});

还有很多未展示的配置，详情可以参考文档。
菜鸟教程

格式化

再补充几个传参时可能遇到的序列化方法。

  • param()
1
2
3
//将js对象转化为 ‘&’ 与 ‘=’ 连接的url格式的字符串
$.param(personObj)  
//firstname=John&lastname=Doe&age=50&eyecolor=blue
  • serialize() 
1
2
3
//将表单数据name和value值变成 ‘&’ 与 ‘=’ 连接的url格式的字符串，可直接拼接url传参
var serializeUrl = $("form").serialize()  
//例：username=1333333333&password=123456
  • serializeArray()
1
2
3
4
//返回的是json对象，可调用JSON.stringify()，将对象转化为字符串
//通过json传递对象方便常用
var serializeJson = $("#test_form").serializeArray();
var serializeJsonString = JSON.stringify(serializeJson));

angular

异步核心对象 $http，对原生XMLHttpRequest对象的简单封装，需要在创建时controller引入。

$http

1
2
3
4
5
6
7
8
9
10
11
12
13
$http({
	 url:url, //请求的url路径
	method:‘GET’, //GET/DELETE/HEAD/JSONP/POST/PUT
	cache:true,   //可对get请求进行缓存
	params:params , //转为 ?param1=xx1&param2=xx2的形式
	data: data //包含了将被当做消息体发送给服务器的数据（可为对象类型，自动通过param()转换为键值对），通常在POST请求时使用
}).then(
	function successCallback(response)  {
		// 请求成功执行代码 
	},
	function errorCallback(response)  {  
		// 请求失败执行代码  
	});

response的五个参数

  • data（字符串或对象）：响应体,就是后台返回的数据
  • status:相应http的状态码,如200
  • headers(函数)：头信息的getter函数，可以接受一个参数，用来获取对应名字的值
  • config(对象)：生成原始请求的完整设置对象
  • statusText:相应的http状态文本，如”ok”

惯例，提供了几个快捷请求，整理了那两个常用的 0.0

.get

1
2
3
4
5
$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.get("h51701.json").then(function successFunction(a){
	$scope.res = a;
})

.post

1
2
3
4
5
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

$http.post("h51701.json",{/*传递的参数对象*/}).then(function successFunction(a){
	$scope.data = a.data;//从返回的信息中取出需要的数据
})

回调 .success / .error

回调如果不用then，可以用.success或者.error。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$http({
	method: "post",
	url: ctx+'/player/lossPlayer/list.htm',
	headers: {
		//默认为application/json;charset=UTF-8，后台无法自动接收
		'Content-Type': 'application/x-www-form-urlencoded'
		},
	data: $.param(data)
}).success(function(result){
	if(result.tip!=undefined){
		//当前绑定的数据清空
		$scope.players = [];
		alert(result.tip);
	}else{
		console.log(result.json);
		$scope.players = $.parseJSON(result.json).players;
	}
});

注：v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

1
好啦，这些基本上够用的了。
CATALOG
  1. 1. ajax介绍
  2. 2. js使用
  3. 3. jquery
    1. 3.1. load
    2. 3.2. get/post
    3. 3.3. ajax
    4. 3.4. 格式化
  4. 4. angular
Total : 33
2018
1024
Pattern Adapter Pattern Principle Composite Pattern Bridge Pattern Decorator Pattern Facade Pattern Flyweight Pattern excel poi Proxy Pattern transaction acid jdbc mysql oracle spring database mvvm front end isolation level Pessimistic Lock Optimistic Lock ajax jquery angular js mybatis primarykey pay we chat problem 闲扯