Json learning notes, json Learning

Json learning notes, json Learning
I.Yesterday's content review

1. Create an ajax object

A) Mainstream browser new XMLHttpRequest ();

B) IE browser new ActiveXObject ("Msxml2.XMLHTTP. 6.0 ");

2. Common attributes and Methods

Attribute: responseText/responseXML readyState onreadystatechange

Method: open (method, url address, true/false) send () setRequestHeader ()

3. Get request and post request

Get request:

Encode the request string and Chinese/special characters after passing the url address of the Parameter

Post request:

Send Parameter)

Call setRequestHeader () to organize data into xml format

Chinese characters do not need to be encoded. special characters need to be encoded.

At the same time, you can pass the get parameter information and use $ _ GET to receive

4. Asynchronous and synchronous requests

Open (method, url address, [asynchronous true]/Synchronous false)

Asynchronous: multiple processes can be executed at the same time.

Synchronization: A process can be executed at the same time.

 

5. Implementation of refreshing pagination

① Implementation of traditional paging Effects

② Ajax encapsulate traditional Paging

6. Xml Receiving and Processing

Ajax + javascript cooperation for xml Receiving and Processing

Ajax property responseXML receives xml Information

You can call the getElementByTagName () method for both document objects and common element node objects.

7. Cache Processing

① Set a random number for the requested address

② Set the header for the dynamic program page to disable browser caching

II. JSON1. What is json

Json: javascript object notation (javascript object symbol)

It is a "literal object" that we have learned js before"

It is a data exchange format (the former xml is also a data exchange format ).

 

The "portal website" provided by the server on the weather official website needs to be accessed by two users: common public and enterprise websites.

Enterprise websites do not produce advertising benefits for our weather websites. They only waste a lot of our traffic.

In this way, we need to optimize the processing.

 

 

 

To facilitate the use of weather information on enterprise websites, the weather information is provided through an "interface". The information of this interface is weather information, and the data volume can be controlled.

 

To provide weather information for enterprise websites through interfaces, you need to consider how the language of each enterprise website can receive and parse the information conveniently and quickly. In this way, the interface information needs to be organized into a specific format, which can be xml or json.

 

 

The interface is responsible for providing weather forecast information:

 

Http://php.weather.sina.com.cn/iframe/index/w_cl.php? Code = js & day = 0 & city = & dfc = 1 & charset = UTF-8

 

In the past, enterprise websites needed to obtain weather information. Generally, all the information on the homepage of the weather forecast official website was sent back, but only a small amount of weather information was obtained, in this way, the consumption of bandwidth, servers on the weather official website, and user waiting time is serious.

This event is optimized: The weather forecast website server makes the weather information into a data interface to provide the advantage that the bandwidth of the company's website each request for weather information decreases and the request speed increases, the load of the weather forecast website server is controlled.

 

For various languages (java/php /. net/javascript). The data format of the data interface can be easily recognized by everyone. Therefore, json/xml is applied.

Json is easier to generate and process than xml, so json is gradually replacing xml in many fields.

2. Use of json 2.1 json representation in javascript

Json is a literal object in javascript.

Var obj = {Name: value, name: value, name: function (){}}

2.2. Generate json information using php

Json_encode (array/object) ------------> Generate json Information

Json_encode (associated array) ----> json object

Json_encode (Index Array) ----> js Array

Json_encode (Index associated array) ----> json object

Json_encode (object) ----> json object

Json information generated by arrays/objects is as follows:

 

2 .** 3 php processes json Information **

After receiving the Json information, it is necessary to decode the information to be parsed:

Json_decode (json information, boolean); anti-encoding json Information

Decodes json string information to the information that can be recognized by the current language.

Json_decode (json string,True) ---> Array

Json_decode (json string ,[False]) ---> Object

 

 

Pure json string anti-encoding Operation Note: single quotes, and add true!

 

 

2.4. javascript receives and processes json information.

Ajax obtains interface information, and javascript itself processes json information.

Convert received json strings into real object information through eval ()

How to change a js string to an object:

 

 

 

Ajax and javascript work together to receive and process json information: using the eval function

 

 

 

Server json interface data:

 

 

 

3. Json transformation ajax refreshing pagination

 

 

 

① Each ajax request must obtain three pieces of information from the server. The bandwidth, server resources, user wait time, and other resources must be occupied in three parts. We need to optimize them: place unchanged css styles and html tags on the client for manual generation, which reduces the work of the server and bandwidth waste.

② The paging data returned each time is "the whole big part", and the data parsing and splitting are very inflexible.

 

In this case, the server data can be transmitted back in json format (previously in html tag format)

 

Effect of generating json information using two-dimensional arrays:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

On the server side, the data is organized into json format, json is parsed on the client side, and information is organized into html tags for display:

 

 

When setting database information traversal, you can add tags to pages. Nmpk is on the page.

II. No refreshing form information submission

Form: logon to the system and Registration of members have forms

When the traditional form page implements submit submission, the browser redirects the Page Based on the action attribute value of the form tag.

Frequent page jumps reduce user experience

Some websites have requirements: When you log on or submit a registry ticket, you can transmit new information without any need. To improve user experience

 

Traditionally, dom + ajax does not need to collect and submit form information:

 

If the page is not refreshed, submit the data to the server:

 

 

1. Collect form information

Traditionally, to collect form information, you need to write a lot of repeated code (document. getElementById) and assembled long string request information, which is inconvenient for development and maintenance.

We need to use the new FormData technology for data collection.

Using the new FormData form data object technology, you can quickly collect form information.

FormData is a new html5 technology that can be used normally in mainstream browsers.

 

Use FormData to collect data: (both evt and return false can prevent browser form submission)

 

 

Effect:

 

Summary:

1. Json Data Exchange Format

Php generates/parses json:

Json_encode ()

Json_decode (json string, true/[false])

Json parsing by JS:

Eval ("var name =" + json string)

2. Json transformation ajax refreshing pagination

Previous ajax paging: the server organizes an "entire paging" data back through the html Tag. This data cannot be flexibly split and there is still a lot of fixed content (html Tag and css style) inside it)

Json Transformation: Only data information is obtained from the server. The resolution and processing of the information is flexible when the json object is returned.

 

3. FormData quickly collects form information

Var fd = new FormData (the Element Node object of the form label)

2. AjaxRefreshing Attachment upload

Dom can obtain information about common form fields and directly submit the information to the server.

Javascript can capture attachment information. In the past, browser technology was not allowed to capture attachment information through javascript Due to security restrictions.

FormData can be used to collect information about common form fields and uploaded file fields.

 

Technical Points for attachment uploading: