1.1web 实现数据交互的⼏种常见⽅式
前⾔
在当今社会，作为⼀名前端程序猿，并不是⼀昧的去制作静态页⾯就可以满⾜滴；你说你会制作⽹页，好吧，只能说你算是⼀个前端程序猿。但这是你作为⼀个程序猿最基本的能⼒，并不会为你进⾏加分；
我们都明⽩，要想提⾼竞争⼒，提⾼⾃⼰的技能是⼗灰重要的。前后台的数据交互就是⼀个很好的加分项。今天，就带⼤家⼀起了解⼀下web 前端实现数据交互的⼏种⽅式；
⼀、Ajax
作为⼀个前端程序猿，对于各种JS 框架和各种库肯定不陌⽣。原⽣js 的ajax 以及jQuery 的ajax 都是⼗分常⽤的数据交互的⽅式；
原⽣JS 的Ajax
⼤家可能对原⽣JS ⽐较陌⽣，毕竟相对于jQuery 的ajax，原⽣的确实有些复杂，不够jQuery 的ajax 是由原⽣的ajax 封装⽽来。由此可见了解原⽣的ajax 是⼗分必要的；
⾸先，要了解异步的javascript 和xml，核⼼对象为XMLHttpRequest.
接下啦，给⼤家介绍XMLHttpRequest 中的属性与⽅法：
XMLHttpRequest
属性：
⼆、XMLHttpRequest
⽅法：
接下来，把栗⼦中的步骤整理⼀下：
第⼀步：获得XMLHttpRequest对象；
var ajax = new XMLHttpRequest();
第⼆步：设置状态监听函数
第三步：open⼀个请求：
其中，第⼀个参数为传递⽅式：get/post;
第⼆个参数：请求数据的url地址；
第三个参数：true/false。true表⽰异步请求。false表⽰同步请求
ajax.open("GET","h5.json",true);
第四步：send⼀个请求。可以发送对象和字符串，不需要传递数据发送null;
ajax.send(null);
第五步，在监听函数中，判断readyState==4 && status == 200表⽰请求成功；
if (adyState == 4 && ajax.status == 200) {}
第六步，使⽤sponseText、sponseXML接收响应数据，并使⽤原⽣js操作DOM进⾏显⽰；console.log(JSON.sponseText));
直接上栗⼦：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<script type="text/javascript">
7//第⼀步：获得XMLHttpRequest对象
8var ajax = new XMLHttpRequest();
9
10//第⼆步：设置状态监听函数
11 adystatechange = function(){
12 //console.adyState);
13 //console.log(ajax.status);
14//第五步，在监听函数中，判断readyState==4 && status == 200表⽰请求成功；
15if (adyState == 4 && ajax.status == 200) {
16//第六步，使⽤sponseText、sponseXML接收响应数据，并使⽤原⽣js操作DOM进⾏显⽰
17 //console.sponseText);
18 //console.sponseXML);//返回不是XMl，显⽰null
19 console.log(JSON.sponseText));
20 //console.log(eval("("+sponseText+")"));
21
22
23 }
24 }
25
26//第三步：open⼀个请求
27 ajax.open("GET","h5.json",true); //true表⽰异步请求。false表⽰同步请求
28
29//第四步：send⼀个请求。可以发送对象和字符串，不需要传递数据发送null;
30 ajax.send(null);
31
32var str = "alert('111')";
33 eval(str);
34 eval("alert('111')");
35
36var json1 = "{'name':'zhangsan'}";
37 console.log(eval("("+json1+")"));
1.1.238 </script >
39 </head >
40 <body >
41 </body >
42 </html >
json:
1 [
2 {
3 "name": "zhangsan",
4 "age": 17,
5 "hobby": [
6 "吃",
7 "喝",
8 "玩",
9 "乐"
10 ],
11 "score":{
12 "math":78,
13 "chinese":89
14 }
15 },
16 {
17 "name": "zhangsan",
18 "age": 17,
19 "hobby": [
20 "吃",
21 "喝",
22 "玩",
23 "乐"
24 ],
25 "score":{
26 "math":78,
27 "chinese":89
28 }
29 },
30 {
31 "name": "zhangsan",
32 "age": 17,
33 "hobby": [
34 "吃",
35 "喝",
36 "玩",
37 "乐"
38 ],
39 "score":{
40 "math":78,
41 "chinese":89
42 }
43 }
44
45 ]
结果：
解析json 的两种⽅式
在解析json 的时候，通常我们使⽤JSON.parse()进⾏解析；但是，有很多程序猿使⽤eval()来解析json ；
1、eval 函数⽤于将字符串中的代码解析出来并执⾏
当使⽤eval 函数解析JSON 字符串时，需要在函数内部将JSON 字符串⽤()拼接
eval("("+json1+")")表⽰eval 函数中的字符串不是⽤于执⾏，⽽是进⾏字符串解析
eval("("+json1+")") = JSON.parse(json1);
举个⼩例⼦：
1.21.
2.21 var json1 = "{'name':'zhangsan'}";
2 console.log(eval("("+json1+")"));
结果：
jQuery 中的Ajax
$.ajax()：是JQuery 最底层的ajax 函数，参数接收⼀个⼤对象。对象⾥⾯的属性和⽅法，表⽰ajax 请求的相关设置：
① url : 请求远程⽂件的路径
② type ： Ajax 请求的类型，可选值 get/post
③ data: 对象格式。向后台发送⼀个对象，表⽰传递的数据。
常⽤与type 为"post"的请求⽅式；
如果type 为"get"，可以直接使⽤？追加在URL 的后⾯。
④ dataType ：预期后台返回什么类型的数据。
"text"-字符串 "json"-JSON 对象
⑤ success: 请求成功的回调函数。参数接受⼀个data ，表⽰后台返回的数据。
⑥ error : 请求失败的时候的回调函数
⑦ statusCode ： 接受⼀个对象，对象的键值对是status 状态码和对应的回调函数，表⽰当请求状态码是对应数
字时，执⾏具体的操作函数。
200-正常请求成功 404-页⾯没有到 500-服务器内部错误。
再再举个栗⼦：<script type ="text/javascript">
$(function (){
$.ajax({
url : "url",
type: "post",
data : {
name : "李四",
age : 28
},
//dataType : "json",
success : function (data){
/
/ JQuery 中吧JSON 字符串转成JSON 对象
var jsons = $.parseJSON(data);
console.log(jsons);
},
error: function (){
alert("请求失败啦！");
},
statusCode:{
"404":function (){
alert("404表⽰页⾯没有到");
},
"500":function (){
alert("500表⽰服务器内部错误");
},
"200":function (){
alert("200表⽰请求成功");
}
}
});
</script >
$.post/$.get
在jQuery 中，还进⼀步封装了Ajax ，$.get(); $.post(); 这两个函数，是在$.ajax()的基础上进⾏封装⽽来。可以直接默认发送get 请求或post 请求；
接受四个参数：
①请求的URL路径。相当于$.ajax()⾥⾯的url；
②向后台传递的数据。相当于$.ajax()⾥⾯的data；
③请求成功的回调函数。相当于$.ajax()⾥⾯的success；
④预期返回的数据类型。相当于$.ajax()⾥⾯的dataType；
疯狂的举栗⼦：
$.post("Surl",{data:"aaa"},function(data){
console.log(data);
},"json");
⼆、AngularJS中的$http
在上篇的AngularJS中⼩编讲了⼀下$http，今天再来复习⼀遍；AngularJS中的$http的基本样式⽐较简单，
1 $http({
2 method:"get/post", /*请求的⽅法*/
3 url:" " /*请求的地址*/
4 }).then(function(classes){
5 /*请求成功的回调函数*/
6 },function(){
7 /*请求失败的回调函数*/
8 });
直接上栗⼦：
<!DOCTYPE html>
<html>
<head>
angular和angularjs<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="app" ng-controller="ctrl">
<table width="400px"border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>兴趣</th>
<th>语⽂成绩</th>
<th>数学成绩</th>
<th>总分</th>
</tr>
<tr ng-repeat="item in classes|orderBy:'score.chinese+score.math'">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.hobby}}</td>
<td>{{item.score.math}}</td>
<td>{{item.score.chinese}}</td>
<td>{{item.score.math+item.score.chinese}}</td>
</tr>
</table>
</body>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
.controller("ctrl",function($scope,$http){
$http({
method:"get", /*请求的⽅法*/
url:"AngularJs.json" /*请求的地址*/
}).then(function(classes){
/*请求成功的回调函数*/
$scope.classes=classes.data;
// $scope.name = classes.data.name;
alert("请求成功！");
},function(){
/*请求成功的回调函数*/
alert("请求失败");
});
});
</script>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论