JSON Learning Notes

A Yesterday's Content Review

1. Creating an Ajax Object

A) Mainstream browser new XMLHttpRequest ();

B) IE browser new ActiveXObject ("msxml2.xmlhttp.6.0");

2. Common Properties and methods

Property: Responsetext/responsexml readyState onreadystatechange

Method: open (mode, URL address, true/false) send () setrequestheader ()

3. Get requests and POST requests

Get Request:

Pass parameter URL address behind request string, chinese/special symbol requires encoding processing

Post Request:

Pass parameter Send (parameter)

Call setRequestHeader () to organize the data into XML format

Chinese do not need coding, special symbols need to be encoded

You can also pass the Get parameter information and receive it using $_get

4. asynchronous, Synchronous Request

Open (way, URL address, [asynchronous true]/synchronous false)

Async: allow multiple processes to execute at the same time

Sync: allow a process to execute at the same time

5. No Refresh paging effect implementation

① Traditional Paging effect implementation

②ajax to encapsulate traditional pagination

6. XML reception and processing

Ajax+javascript cooperation to realize XML receiving and processing

Ajax Properties Responsexml receive XML information

Both the document object and the normal element node object can call the Getelementbytagname () method

7. Cache processing

① set a random number to the requested address

② Set Header header for dynamic program page, disable browser cache

two． JSON1. What is JSON

Json:javascript Object Notation (javascript Object Symbol)

It's the "literal object" we learned about JS Before.

It is a data interchange Format (the Previous XML is also the data interchange format).

Weather official Website The "portal" provided by the server needs to be accessed by two users: General public, corporate website

The corporate website does not generate advertising benefits for our weather sites, it will only waste our many Traffic.

This way we need to do the optimization processing.

In order to facilitate the use of weather information, The weather information specifically through an "interface" to provide, the interface information is specifically weather information, the amount of data can be Controlled.

Through the interface to the enterprise website to provide weather information, need to consider how each enterprise website language convenient, quickly receive the receive and resolve the interface Information. This allows the interface information to be organized into a specific format, which can be either XML or Json.

The interface is dedicated to 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

Before the enterprise website needs to obtain the weather information, usually will send the whole information of the homepage of the weather report to the request back, but only in the inside obtains the very little weather information, does this to the bandwidth, The weather official website server, The user waits the time to consume more serious.

This event is optimized to Handle: weather forecast website server to make the weather information into a data interface to provide, the advantage is that every time the Enterprise website request The weather information bandwidth becomes smaller, the request speed, The weather forecast website server load is Controlled.

For various languages (java/php/.net/javascript) website user convenient Use this data interface, the data format of its interface is best that everybody can recognize, so Json/xml is Applied.

JSON is more convenient to build and process than xml, so JSON is gradually replacing the use of XML in many Areas.

2. Use of JSON 2.1 JavaScript inside JSON embodies

JSON is a literal object inside JavaScript

var obj = {name: value, name: value, name: function () {}}

2.2 generating JSON information from PHP

Json_encode (array/object)------------> Generate JSON information

Json_encode (associative Array)---->json Object

Json_encode (indexed Array)---->js Array

Json_encode (indexed Associative Array)---->json object

Json_encode (object)---->json Object

The JSON information generated by each array/object is as Follows:

2.*PHP Processing JSON information **

After receiving the JSON information, to parse the information, it will be anti-encoding processing:

Json_decode (json information, boolean); Anti-coding JSON information

Deserializes the JSON string information into information that the current language can Recognize.

Json_decode (json string,true)--->array

Json_decode (json string, [false])--->object

Pure JSON string anti-coding operation Note: Single quotes, and add true!

2.4 JavaScript receives processing JSON information

Ajax obtains interface information, and JavaScript itself processes JSON information

Use eval () to turn the received JSON string into real object information

How to change a JS string to Object:

Ajax and JavaScript collaboration for JSON information reception processing: using the eval function

Server-side JSON Interface Data:

3. JSON transform Ajax no refresh paging

①ajax each request from the server to obtain three parts of information, bandwidth, server resources, user wait time and other resources to occupy three copies, we have to do optimization: the unchanged CSS style, HTML tags placed on the client manually generated, thereby reducing the server side of the work, reduce bandwidth Waste.

② each time the paging data is "a large part of the whole", data parsing, splitting is very inflexible

At this point the Server-side data can be passed back in JSON format (previously HTML tag format)

The effect of generating JSON information from a two-dimensional array:

On the server side, the data is organized into JSON format, the client parses the JSON and organizes the information into HTML tags for display:

You can add tags to the paging when you set up the Traverse database Information. NMPK on the Page.

Two No Refresh form information Submission

Forms: Login system, Registered members have a form

When the traditional Form form page implements submit, the browser will make a page jump based on the value of the Action property of the form Tag.

Pages often skip the transfer to reduce the user experience effect

Some sites have requirements: when the login or registration form submission, The implementation of Non-refresh mode of information Transmission. To improve the user experience

The traditional way Dom+ajax collects and submits form information without flushing:

When the page is not refreshed, it submits the data to the Server:

1. Collect form Information

The traditional way to collect the form information, need to write many duplicate code (document.getelementbyid) and assemble long string of request information, very inconvenient to develop, maintain.

Then we need to use new technology formdata to achieve data Collection.

With new technology formdata form data objects, You can quickly collect form Information.

Formdata is a new technology for html5, which can be used normally in mainstream browsers.

Use Formdata to collect Data: (evt and return false both prevent browser form submission Actions)

Implementation Results:

Summarize:

1. JSON Data Interchange Format

PHP generate/parse json:

Json_encode ()

Json_decode (json string, True/[false])

JS parsing json:

Eval ("var name =" +json String)

2. JSON transform Ajax No Refresh paging

Previous Ajax paging: The server organizes an "entire paging" data back through HTML tags, which is not flexible enough to split, with many fixed content (html tags and css styles) inside.

JSON transformation: only from the server to obtain data information, information is returned through the JSON object its parsing and processing is very flexible.

3. Formdata quickly collect form information

var fd = new FormData (element node object of form Label)

2. AjaxNo refresh Attachment upload

The DOM can get normal form field information and can be submitted directly to the server

JavaScript implements the attachment information crawl, before the browser technology due to security restrictions, also does not allow the use of JS crawl attachment Information.

Formdata can realize the collection of common form fields and upload file domain Information.

Attachment Upload Related Technical points:

JSON Learning Notes