How to call json using js

This article gives you a detailed analysis of the summary of js calling json method. Friends in need can refer to it.

Ajax basics

ajax: No refresh data reading, reading information on the server

HTTP request method:

GET: used to obtain data, such as browsing posts

ajax.judgeXmlHttpRequest('get', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
})

POST: used to upload data, such as user registration

var dataJson = {
  name: 'ys',age: 123 
}
ajax.judgeXmlHttpRequest('post', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
},dataJson)

The difference between GET and POST:

GET: Passed through the URL (put into the URL), the passed data will be placed on the URL, name = value & name = value

The get method has small capacity and security Low, with cache

POST: not passed through the URL

The post capacity is large, generally up to 2G, the security is relatively high, there is no cache

Preparation of native Ajax

Ajax operation steps

Create an Ajax object

Non-IE6 browser:

var oAjax=new XMLHttpRequest();

IE6 browser:

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

Connect to the server

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

Prevent caching method:

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

Synchronization: js means that things must come one by one

Asynchronous: In js, it means that multiple things need to be done together

ajax is used for asynchronous transmission, not synchronous

Send request

Ajax.send();

Receive return value

Request status monitoring: onreadystatechange event: triggered when there is communication between your own Ajax and the server. It is mainly judged by the readyState attribute. The end does not mean success. The status attribute is used to judge.

readyState attribute: Request status

0 (not initialized) The open method has not been called yet

1 (Loading) The send() method has been called and the request is being sent

2 (Loading completed) The send() method is completed and all corresponding content has been received

3 (Parsing) The received response content is being parsed

4 (Completed) The response content parsing is completed, OK Called on the client (completion is not necessarily successful, status is needed to detect success or failure)

status attribute:

Request result, whether it is success (200) or failure (404): Ajax .status==200

Return value responseText:

Text returned from the server: Ajax.responseText (the returned value is a string, sometimes it needs to be further processed into other formats)

oAjax.onreadystatechange=function(){
  //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了
  if(oAjax.readyState==4){ //读取完成
    if(oAjax.status==200){ //读取的结果是成功
      alert('成功:'+oAjax.responseText);
    }
  }
}

Encapsulate the native Ajax into a function. The final native Ajax written is:

The function encapsulated by the GET method is:

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); //对失败的原因做出处理
    　　  }
   　　 }
  　　 }
 　　}
　 }

The function encapsulated by the POST method is:

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);
      }
    }
  };
}

Character set encoding: The encoding of the web page and the requested file must be the same, if both are utf8

caching, prevent caching (often Changed data, etc., cannot be cached. Mainly used for GET method), when passing parameters, add? 'Variable data' after the path, which can not affect the original data

ajax('a.txt?t='+new Date().getTime(),function(str){
  alert(str);
},function(str){
  alert(str);
});

ajax request dynamic data: For example, json file

1 The ajax return value is a string, and the returned array/json data can be read through eval conversion

alert(str);
alert(typeof(str));
var arr=eval(str);
alert(typeof(arr));
alert(arr[1]);
alert(arr[1].c);

2 Create elements combined with DOM to display the return Content

oBtn.onclick=function(){
  ajax('data/arr3.txt?t='+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);
  });
}

Data type-->The returned data type may be xml (almost eliminated), json (now commonly used)

Let’s take a look at the native js I just wrote recently. Example of calling json by the get method:

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='';
    if ((xmlHttp.readyState == 4)&&(xmlHttp.status == 200)) {//4代表执行完成,200代表执行成功
      var data = JSON.parse(xmlHttp.responseText);
      if(data.code == 200){
      //代码执行
      }
      document.getElementById('appMatch').innerHTML = html;
    }
  }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement change detection using Angular

Comparison of map, set, array, and object in ES6 (detailed tutorial )

How to implement a static server using Node.js

The above is the detailed content of How to call json using js. For more information, please follow other related articles on the PHP Chinese website!