The whole process of reading json with AJAX of native JS

First of all, ajax (async javascript and xml) is used for interaction between front-end and back-end files such as xml or json. It is an asynchronous loading technology, which means that when you click on a loading event, you no longer need to refresh the entire page, but send a partial request and a partial response. Since AJAX is not a complete front-end and requires the use of a server, the html files and xml or json must be placed in the server deployment directory when doing experiments. Here I am using TOMCAT 7X.

First edit a simple JSON file and name it json.json, as follows:

[{  "key":"value"}  ]

function showJson(){
var test;
if(window.XMLHttpRequest){
    test = new XMLHttpRequest();
}else if(window.ActiveXObject){
    test = new window.ActiveXObject();
}else{
    alert("请升级至最新版本的浏览器");
}
if(test !=null){
    test.open("GET","json.json",true);
    test.send(null);
    test.onreadystatechange=function(){
        if(test.readyState==4&&test.status==200){
            var obj = JSON.parse(test.responseText);
            for (var name in obj){
                alert(obj[name].key);
            }
        }
    };
}
}
window.onload=function(){
  showJson();
};</span>

1. To use AJAX, we must new An instance of XMLHttpRequest(), which is ActiveXObject() in lower IE browsers. Just use if statement to judge.

2. Trigger the onreadystatechange event by judging the interactive state of readyState and the interactive state of status .

Here is an introduction to the four values ​​of readyState:

(1) The value is 0: the request has not been initialized, meaning open() has not started yet;

(2) The value is 1: the request has been initialized but has not been sent, which means there is no send() yet;

(3) The value is 2: The request has been sent and is being processed in the background.

(4) The value is 3: The request is still being processed, but some data can be used. I don’t quite understand what it means now.

(5) The value is 4: The background server has completed the response, that is, you can now obtain the requested data at any time.

But when readyState==4, we can only know that the server has responded, but we still don’t know whether the server has found the file we requested. At this time, we need to reference status.

Here is an introduction to several common values ​​of status:

(1) 200: The requested file was found.

(2) 404: The requested file cannot be found.

(3) 500: Server error.

When readySate==4 and status==200 are satisfied at the same time, we can get the value we want.

3. The value returned by the server is stored in the responseText object. At this time we can use JSON.parse() to get the data inside.

4. We have now taken out a whole block of data in the JSON file, but if we want to get a certain block value, such as value, we must use Traversal, such as a for loop. I used another form of for(var name in obj) for the for loop here, which means to get the value of the object and store it in the variable name. Because the structure of JSON files is composed of many objects.

5. If "GET" is used, the value in send() is null. If it is POST, you need to pass specific parameters such as: send(name);

Finally write it to students who are new to AJAX. How to run this code (configure AJAX environment).

(1) First you need to download a server, I recommend TOMCAT.

(2) Then deploy (paste) the files containing your html and json to the webapps folder in the root directory of Tomcat.

(3) Return to the Tomcat root directory, open the bin folder, and find startup.bat. Double-click to open the Tomcat server.

(4) Open the browser and enter http://localhost:8080/ to check whether Tomcat is open. If 404 appears, port 8080 may be occupied. At this time, return Open the conf folder in the Tomcat root directory and find the server.xml file. Find this code: Connector port="8080", change 8080 to 8081 or 8082, and re-enter http://localhost:8081 in the browser. /Check whether Tomcat is opened.

(5) Enter your html file path in the browser, for example: http://localhost:8080/test/index.html.

This article introduces the whole process of reading json using AJAX using native JS. For more related content, please pay attention to the php Chinese website.

Related recommendations:

vue.js installation and configuration

JS implements browser printing and print preview

##JS callback function example

The above is the detailed content of The whole process of reading json with AJAX of native JS. For more information, please follow other related articles on the PHP Chinese website!