Home Web Front-end JS Tutorial How to call json in native js

How to call json in native js

Mar 17, 2018 pm 03:13 PM
javascript json transfer

This time I will show you how to call json from native js. What are the precautions for calling json from native js? Here are practical cases, let’s take a look.

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);  //这是服务器返回的数据
})
Copy after login
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)
Copy after login

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, low security, and cache

POST: does not pass through the URL

The post capacity is large, generally up to 2G, Relatively high security, no caching

Native Ajax writing

Ajax running steps

Creating an Ajax object

Non IE6 browser:

var oAjax=new XMLHttpRequest();
Copy after login
IE6 browser:

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

Connect to the server

Ajax.open(方法,文件名,异步传输);
Copy after login
Block caching method:

Ajax.open('GET','a.txt?t='+new Date().getTime(),true);
Copy after login
Sync :js means that things must be done one by one

Asynchronous:js means that multiple things must be done together

ajax is used for asynchronous transmission, not synchronously

Send requests

Ajax.send();
Copy after login

Receive return value

Request status monitoring: onreadystatechange event: Triggered when there is communication between your own Ajax and the server, mainly through the readyState attribute to determine whether it has ended. , the end does not mean success, the status attribute is used to judge the

readyState attribute: the request status

0 (not initialized) has not called the open method

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 (Analysis) The received message is being parsed Response content

4 (Complete) The response content parsing is completed and can be called on the client (completion is not necessarily successful, status is required 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, which sometimes needs to be further processed into other formats)

oAjax.onreadystatechange=function(){
  //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了
  if(oAjax.readyState==4){ //读取完成
    if(oAjax.status==200){ //读取的结果是成功
      alert('成功:'+oAjax.responseText);
    }
  }
}
Copy after login
Encapsulate native Ajax into a function and use it. 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); //对失败的原因做出处理
        }
      }
     }
   }
  }
Copy after login

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);
      }
    }
  };
}
Copy after login

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

cache, to prevent caching (frequently changing data, etc., cannot be cached. Mainly used for GET method), when passing parameters, add ? + 'variable data' after the path. OK Does not affect the original data

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

ajax requests dynamic data: such as json file

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

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

2 Create elements combined with DOM to display the returned content

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>'+arr[i].user+'</span>密码:<span>'+arr[i].pass+'</span>';
      oUl.appendChild(oLi);
    }
  },function(str){
    alert(str);
  });
}
Copy after login
Data type-->The returned data type may be xml (almost eliminated), json (now Commonly used)

Let’s take a look at an example where I recently wrote native js to call json through 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;
    }
  }
}
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

JS imitation classic legendary game

##How to set up remote mode for webpack-dev-server

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the difference between MySQL5.7 and MySQL8.0? What is the difference between MySQL5.7 and MySQL8.0? Feb 19, 2024 am 11:21 AM

MySQL5.7 and MySQL8.0 are two different MySQL database versions. There are some main differences between them: Performance improvements: MySQL8.0 has some performance improvements compared to MySQL5.7. These include better query optimizers, more efficient query execution plan generation, better indexing algorithms and parallel queries, etc. These improvements can improve query performance and overall system performance. JSON support: MySQL 8.0 introduces native support for JSON data type, including storage, query and indexing of JSON data. This makes processing and manipulating JSON data in MySQL more convenient and efficient. Transaction features: MySQL8.0 introduces some new transaction features, such as atomic

Performance optimization tips for converting PHP arrays to JSON Performance optimization tips for converting PHP arrays to JSON May 04, 2024 pm 06:15 PM

Performance optimization methods for converting PHP arrays to JSON include: using JSON extensions and the json_encode() function; adding the JSON_UNESCAPED_UNICODE option to avoid character escaping; using buffers to improve loop encoding performance; caching JSON encoding results; and considering using a third-party JSON encoding library.

Pandas usage tutorial: Quick start for reading JSON files Pandas usage tutorial: Quick start for reading JSON files Jan 13, 2024 am 10:15 AM

Quick Start: Pandas method of reading JSON files, specific code examples are required Introduction: In the field of data analysis and data science, Pandas is one of the important Python libraries. It provides rich functions and flexible data structures, and can easily process and analyze various data. In practical applications, we often encounter situations where we need to read JSON files. This article will introduce how to use Pandas to read JSON files, and attach specific code examples. 1. Installation of Pandas

How do annotations in the Jackson library control JSON serialization and deserialization? How do annotations in the Jackson library control JSON serialization and deserialization? May 06, 2024 pm 10:09 PM

Annotations in the Jackson library control JSON serialization and deserialization: Serialization: @JsonIgnore: Ignore the property @JsonProperty: Specify the name @JsonGetter: Use the get method @JsonSetter: Use the set method Deserialization: @JsonIgnoreProperties: Ignore the property @ JsonProperty: Specify name @JsonCreator: Use constructor @JsonDeserialize: Custom logic

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

In-depth understanding of PHP: Implementation method of converting JSON Unicode to Chinese In-depth understanding of PHP: Implementation method of converting JSON Unicode to Chinese Mar 05, 2024 pm 02:48 PM

In-depth understanding of PHP: Implementation method of converting JSONUnicode to Chinese During development, we often encounter situations where we need to process JSON data, and Unicode encoding in JSON will cause us some problems in some scenarios, especially when Unicode needs to be converted When encoding is converted to Chinese characters. In PHP, there are some methods that can help us achieve this conversion process. A common method will be introduced below and specific code examples will be provided. First, let us first understand the Un in JSON

Quick tips for converting PHP arrays to JSON Quick tips for converting PHP arrays to JSON May 03, 2024 pm 06:33 PM

PHP arrays can be converted to JSON strings through the json_encode() function (for example: $json=json_encode($array);), and conversely, the json_decode() function can be used to convert from JSON to arrays ($array=json_decode($json);) . Other tips include avoiding deep conversions, specifying custom options, and using third-party libraries.

How to use PHP functions to process JSON data? How to use PHP functions to process JSON data? May 04, 2024 pm 03:21 PM

PHP provides the following functions to process JSON data: Parse JSON data: Use json_decode() to convert a JSON string into a PHP array. Create JSON data: Use json_encode() to convert a PHP array or object into a JSON string. Get specific values ​​of JSON data: Use PHP array functions to access specific values, such as key-value pairs or array elements.

See all articles