首页 > web前端 > js教程 > 使用js如何调用json

使用js如何调用json

亚连
发布: 2018-06-05 15:22:20
原创
2996 人浏览过

本篇文章给大家详细分析了js调用json方法的总结,对此有需要的朋友可以参考学习下。

Ajax基础

ajax:无刷新数据读取,读取服务器上的信息

HTTP请求方法:

GET:用于获取数据,如浏览帖子

1

2

3

ajax.judgeXmlHttpRequest('get', 'index.php', function(data){

  alert(data);  //这是服务器返回的数据

})

登录后复制

POST:用于上传数据,如用户注册

1

2

3

4

5

6

var dataJson = {

  name: 'ys',age: 123

}

ajax.judgeXmlHttpRequest('post', 'index.php', function(data){

  alert(data);  //这是服务器返回的数据

},dataJson)

登录后复制

GET与POST的区别:

GET:通过网址传递(放入url中),会将传递的数据放到网址上面,名字=值&名字=值

get方式容量小,安全性低,有缓存

POST:不通过网址传递

post容量较大,一般可达2G,安全性相对较高,没有缓存

原生Ajax的编写

Ajax运行步骤

创建一个Ajax对象

非IE6浏览器:

1

var oAjax=new XMLHttpRequest();

登录后复制

IE6浏览器:

1

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

登录后复制

连接到服务器

1

Ajax.open(方法,文件名,异步传输);

登录后复制

阻止缓存方法:

1

Ajax.open('GET','a.txt?t='+new Date().getTime(),true);

登录后复制

同步:js中指事情必须一件一件来

异步:js中指多件事情要一起做

ajax是做异步传输的,并不是同步

发送请求

1

Ajax.send();

登录后复制

接收返回值

请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发,主要通过readyState属性来判断结束没有,结束了也并没有代表成功,status属性来判断

readyState属性:请求状态

0(未初始化)还没有调用open方法

1(载入)已经调用send()方法,正在发送请求

2(载入完成)send()方法完成,已经收到全部相应内容

3(解析)正在解析收到的响应内容

4(完成)响应内容解析完成,可以在客户端调用(完成并不一定成功,需要status来检测是成功还是失败)

status属性:

请求结果,是成功(200)还是失败(404):Ajax.status==200

返回值responseText:

从服务器返回来的文本:Ajax.responseText(返回的值是一个字符串,有时需要进一步处理成其他格式的形式)

1

2

3

4

5

6

7

8

oAjax.onreadystatechange=function(){

  //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了

  if(oAjax.readyState==4){ //读取完成

    if(oAjax.status==200){ //读取的结果是成功

      alert('成功:'+oAjax.responseText);

    }

  }

}

登录后复制

将原生Ajax封装成一个函数使用,最终编写的原生Ajax为:

GET方法封装的函数为:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

function ajax(url,fnSuccess,fnFaild){

  //1.创建Ajax对象。js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined。IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用

  if (window.XMLHttpRequest) {

    var oAjax=new XMLHttpRequest();//非IE6

   }else{

    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6

   }

  //2.连接到服务器

  oAjax.open('GET',url,true);

  //3.发送请求

  oAjax.send();

  //4.接收返回值

  oAjax.onreadystatechange=function(){

    //oAjax.readyState--浏览器和服务器之间进行到哪一步了

    if(oAjax.readyState==4){ //读取完成

      if(oAjax.status==200){ //读取的结果是成功

        fnSuccess(oAjax.responseText); //成功时执行的函数

      }else{

        if(fnFaild){  //判断是否传入失败是的函数,即用户是否关心失败时的结果

          fnFaild(oAjax.responseText); //对失败的原因做出处理

        }

      }

     }

   }

  }

登录后复制

POST方法封装的函数为:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

function ajaxPost(url,id,fnSuccess,fnFaild){

  //1.创建Ajax对象

  if (window.XMLHttpRequest) {

    var xhr=new XMLHttpRequest();//非IE6

  }else{

    var xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE6

  }

  //2.连接到服务器

  xhr.open("POST",url,true);

  //设置头信息

  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

  var form=document.getElementById(id);

  //3.发送请求,传递数据

  xhr.send(serialize(form));

  xhr.onreadystatechange=function(){

    if(xhr.readyState==4){

      if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) {

        fnSuccess(xhr.responseText);

      }else{

        fnFaild(xhr.responseText);

      }

    }

  };

}

登录后复制

字符集编码:网页和被请求的文件的编码要相同,如都是utf8

缓存,阻止缓存(经常改变的数据等,不能够缓存.主要用于GET方法),传参时在路径后面加?+'可变的数据' 可以不影响原数据

1

2

3

4

5

ajax(&#39;a.txt?t=&#39;+new Date().getTime(),function(str){

  alert(str);

},function(str){

  alert(str);

});

登录后复制

ajax请求动态数据:如json文件

1 ajax返回值是一个字符串,可通过eval转换后来读取返回的数组/json数据

1

2

3

4

5

6

alert(str);

alert(typeof(str));

var arr=eval(str);

alert(typeof(arr));

alert(arr[1]);

alert(arr[1].c);

登录后复制

2 结合DOM创建元素,来显示返回的内容

1

2

3

4

5

6

7

8

9

10

11

12

oBtn.onclick=function(){

  ajax(&#39;data/arr3.txt?t=&#39;+new Date().getTime(),function(str){

    var arr=eval(str);

    for (var i = 0; i < arr.length; i++) {

      var oLi=document.createElement(&#39;li&#39;);

      oLi.innerHTML=&#39;用户名:<span>&#39;+arr[i].user+&#39;</span>密码:<span>&#39;+arr[i].pass+&#39;</span>&#39;;

      oUl.appendChild(oLi);

    }

  },function(str){

    alert(str);

  });

}

登录后复制

数据类型-->返回的数据类型可能是xml(几乎已经淘汰),json(现在常用)   

下面来看个我最近刚写原生js通过get方法调用json的例子:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

if(!isNaN(matchId)) {

  var xmlHttp = null;

  try {// Chrome, Firefox, Opera, Safari

    xmlHttp = new XMLHttpRequest();

  }catch (e) {

    try {// Internet Explorer IE 6.0+

      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

      try {// Internet Explorer IE 5.5+

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e) {

        alert("your browser not support ajax!");

      }

    }

  }

  window.onload = function () {

    xmlHttp.open("get",/api/clientMatch/commonMatchDiagram.json?matchId=" + matchId,true);

    xmlHttp.send();

    xmlHttp.onreadystatechange = doResult; //设置回调函数

  };

  function doResult() {

    var html=&#39;&#39;;

    if ((xmlHttp.readyState == 4)&&(xmlHttp.status == 200)) {//4代表执行完成,200代表执行成功

      var data = JSON.parse(xmlHttp.responseText);

      if(data.code == 200){

      //代码执行

      }

      document.getElementById(&#39;appMatch&#39;).innerHTML = html;

    }

  }

}

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

利用Angular如何实现变化检测

ES6中map、set与数组、对象的对比(详细教程)

使用Node.js如何实现静态服务器

以上是使用js如何调用json的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
javascript - js addClass 无效
来自于 1970-01-01 08:00:00
0
0
0
php调用js并获取js的返回值问题
来自于 1970-01-01 08:00:00
0
0
0
javascript - js代码转python
来自于 1970-01-01 08:00:00
0
0
0
找不到js文件代码
来自于 1970-01-01 08:00:00
0
0
0
js高级教程
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板