Ajax Technology One, Ajax technology _php Tutorial

Ajax Technology One, Ajax technology

I. Overview of AJAX

1. Historical origins

In 1998, Microsoft's Outlook Web Access research team integrated a technology in the then IE browser that could send HTTP requests to the server without a flush from the client, a technology called "XMLHTTP".

2005, Google in its own products (Gmail mailbox, Google suggest search suggestions, Google Maps) in the application of Ajax technology, from the mess of Ajax fire ...

2. What is Ajax technology

• Asynchronous: Asynchronous
• Javascript:javascript Technology
• And: And
• XML: Extensible Markup Language, mainly used for data transmission and storage

The so-called Ajax technology is asynchronous JavaScript and XML, because XML is mainly used for data transmission and storage, it is known that the core of Ajax is asynchronous JavaScript.

3. Web Technology

Client language:

• Html
• Css
• Javascript

Service-Side language:

• ASP (ASP)
• Jsp
• Php

Because Ajax is asynchronous JavaScript, we can be sure that Ajax is also running on the client browser.

4. Ajax working mode

1) Sync Request:

Synchronization requests in the case of slow speed, the experience is very unsatisfactory, because the user feel that the entire request is a discontinuous process.

2) Asynchronous Request:

It is known that when the user sends the request, the system first sends the request Ajax object, the Ajax object sends the request, then the server side handles its request, but in the process is not completed, it will return a part of the data to the client, so for the user, the entire request is a continuous process , the experience is very good.

5. Ajax Application Scenarios

① Form validation (real-time authentication of user names is unique)

② Baidu drop-down search

③ No Refresh Paging

④webapp Mobile phone +php daemon (mobile app)

6. Quick Start

Demo01_rumen.html

demo01.php

Operation Result:

Second, the Ajax object

1. Why Ajax objects are required

Remember: Using AJAX technology has a premise that you have to create an Ajax object.

2. How to create an Ajax object

Based on IE kernel browser (ie browser under IE8, compatibility mode for various browsers)

var ajax object = new ActiveXObject (' microsoft.xmlhttp ');

Based on the Core browser (Firefox, Google Browser, various browser speed mode)

var ajax object = new XMLHttpRequest ();

3. Solve the problem of Ajax object compatibility

① Create a Public.js file as the core code base

② defines a $ function that gets the DOM object for the specified ID

③ defines a common function, such as CREATEXHR (), that is used to create an Ajax object

4. Properties and methods in Ajax objects

Common methods

• Open (Method,url): Initialize AJAX objects (set request type and request address)
• setRequestHeader (Header,value): Set request Header

Parameter description:

Header: Request Header

Value: Values

• Send (content): Sending an AJAX request

Parameter description:

Content: The parameter passed in the request blank line, or null if it is a GET request

Common Properties

• onReadyStateChange: The callback function triggered when the AJAX status code changes
• Readystate:ajax Status Code

0: The object is established, but uninitialized, the Createxhr method is called, but the Open method is not called

1: The object is initialized, but not sent, the Open method is called, but the Send method is not called

2: The Send method has been called for request

3: Receiving data (Received part)

4: Receive complete

• Status: Response status code, 200 receive completed, 404 Page Not Found
• StatusText (understanding): Response Status text
• Reponsetext: Response Result
• Responsexml: Response Result

If the server side returns a string, it is received using Xhr.responsetext

If the server side returns data in XML format, it is received using Xhr.responsexml

Third, get requests in Ajax

1. Ajax formula: Get request in Ajax five steps

① Creating an Ajax object

② Setting the callback function

③ Initializing Ajax objects

④ Sending Ajax requests

⑤ judgment and execution

2. Send a GET request using AJAX technology

demo04.php

3. Use the GET request in Ajax for a value-transfer operation

demo05.php

4, a few small problems

1) The problem: When we use Ajax, we find that we are using ECHO statements to return data on the server side, can this place be replaced by a return statement?

A: Although both the Echo and return statements have a meaning of return, the return statement returns the data to the server side, and the echo output is primarily the return output data to the client (browser). Therefore, only echo statements can be used on the server side and cannot use the return statement

2) Question: What happens if the requested page does not exist when Ajax sends the request?

A: If the server-side page We requested does not exist, its Ajax will return the following result:

However, in the actual project development, if the above pop-up window to the user's experience is not good, so must prohibit this behavior,

We can avoid the above situation by judging the server-side response status code:

The above code can also be further simplified to the following form:

3) Question: In the actual project development, the above judgment statement xhr.readystate==4 and xhr.status==200 position can be exchanged?

A: No, because in the actual project development, must be the first to judge the Ajax status code, when it is 4 o'clock to represent the full receipt of the server-side data returned, and the status represents the ReadyState equals 4 based on the evaluation of the server-side return status code, So the order between the two is not interchangeable.

4) Question: How does Ajax debug in development?

① if it is an AJAX syntax error, we can directly capture it directly from the IE's status bar or from the console in the Firebug plugin in Firefox.

② server-side error, if at the time of development, found to return the result is abnormal, we can through the HttpWatch or Web browser network panel for debugging.

HttpWatch:

Firebug:

Google:

③ If you encounter a logic error in development, how to handle

5. Practical application: Use Ajax to verify that the user name is unique

demo06.php

Description: In the actual application case, we can complete the user name is verified by ajax+php, but the runtime found that the above case in the IE browser will create a cache problem, resulting in an exception to the request results, the actual project development, how to solve the problem?

Iv. solving caching problems in Ajax

1. What is IE cache

When we send a GET request to a URL address for the first time in IE, the system automatically caches the requested resource file and stores it in the client browser, which we call the "IE cache".

2. IE Cache function

Microsoft uses caching technology in its own Internet Explorer to allow users to quickly get server-side response data.

Implementation process: When Internet Explorer caches the requested resource file, the system automatically calls the cache file when the request is sent to the same URL at the next time. But it also has a drawback in practical applications: If the server-side data is updated, then we cannot get the latest data in real time.

3. Solve the caching problem of GET request in Ajax technology

1) Use random numbers to solve caching problems

Operation Result:

Note: Although we can use random number bearer to change the URL address of the request, make each request URL inconsistent. However, random numbers do not guarantee that the random number generated each time is unique, and there may be duplication. In addition, the cache file is generated for each request, so the random number generates a large number of cache files on the client.

2) Use timestamps to resolve cache issues (emphasis)

In real-world development, we know that timestamps are never duplicated, so you can use this approach to solve caching problems.

Operation Result:

Description: Although we can use timestamps to resolve caching issues, it also generates a large number of cache files on the client.

3) Use the last modified time of the file to resolve the cache issue (important)

Cache core Mechanism:

If we want to solve the problem of caching, we can change the value of if-modified-since, so that it will be inconsistent with the server's resource file every time the school check is done, to solve the cache problem.

Operation Result:

Note: Although the above program can solve the cache problem, it is not also to generate a large number of cache files it?

A: No, because each time we request the URL address is consistent, so it will only generate 1 cache files, when the second request, the system will only update the cache file, and will not be regenerated.

4) Use the Disable caching feature to solve the Ajax caching problem

You can add the following menu to the server-side page so that you can tell the browser not to cache the current page to resolve the caching problem:

Header function Main function: Tell the browser to do something, the above code means telling the browser not to cache the current page, each request will need to regain the latest data, thereby fundamentally disabling the cache.

Operation Result:

The above program fundamentally disables caching, the ultimate solution.

V. Post requests in Ajax

1. The difference between a GET request and a POST request

① different ways of transmitting parameters

The GET request appends parameters to the end of the URL when the parameter is passed

The POST request is appended to the request blank line position when the parameter is passed

② Security Differences

Post request security is slightly higher than the GET request

③ parameter size is different when parameters are passed

A GET request has a value of up to 2KB, while the POST request theoretically has no size limit, but in the actual project development, it is mainly affected by the php.ini file, in general the maximum value is 8M or 2M

④ Request header information is different

GET Request:

POST request:

In contrast, a POST request has a request header message that is more than a GET request:

content-type:application/x-www-form-urlencoded

2, Ajax in the POST request six steps away

First step: Create an Ajax object

Step Two: Set the callback function

Step three: Initialize the Ajax object

Fourth step: Set the request header information (set Content-type)

Fifth step: Send an AJAX request

Sixth step: judgment and execution

demo08.php

3. Practical application: Use ajax+php to realize no-refresh login function

demo09.php

Vi. XML data in Ajax

1. What is XML

The so-called XML is Extensible Markup Language, the main implementation of large-scale data transmission and storage

2. Schematic diagram of XML execution

PHP can implement parsing of XML, which provides two solutions:

PHP DOM Model (to implement additions and deletions)

PHP simplexml model (for query operation)

1) PHP DOM Model (non-standard DOM model)

① Open up memory space

② loading XML files into memory to form a DOM tree structure

"Non-standard DOM model"

"Standard DOM Model"

The DOM model in JavaScript is the standard DOM model, and in practice, the main difference between a standard DOM model and a non-standard DOM model is:

Non-standard DOM model: Find a point à directly output its value via the NodeValue property

Standard DOM Model: Find a point à find its child node à Output text node value through the NodeValue property

3, the use of ajax+xml to achieve large-scale data analysis

Example: Using Ajax+xml to return a two-digit arithmetic result

Knowledge to use:

ChildNodes: Gets all the child elements of the current element, returning the data

demo10.php

http://www.bkjia.com/PHPjc/1117677.html www.bkjia.com true http://www.bkjia.com/PHPjc/1117677.html techarticle Ajax Technology One, Ajax technology one, Ajax Overview 1, Historical Origins 1998, Microsoft Outlook Web Access Research Group integrated a technology in the then IE browser, can be on the client ...

