In 1998, Microsoft's Outlook Web Access R&D team integrated a technology into the then IE browser that could send HTTP requests to the server without refreshing the client. This technology was called is "XMLHTTP".
In 2005, Google applied Ajax technology in many of its products (Gmail, Google Suggest search suggestions, Google Maps). From then on, Ajax became popular...
The so-called Ajax technology is asynchronous Javascript and XML. Since XML is mainly used for data transmission and storage, it can be seen that the core of Ajax is asynchronous Javascript.
Client language:
Server language:
Since Ajax is asynchronous Javascript, we can be sure that Ajax also runs on the client browser.
When the network speed is relatively slow, the experience of synchronous requests is very unsatisfactory, because the user feels that the entire request is a discontinuous process.
As can be seen from the above figure, when the user sends a request, the system first sends the request to the Ajax object. The Ajax object sends the request, and then the server processes the request, but the processing has not yet been completed. , it will return part of the data to the client, so for the user, the entire request is a continuous process, and the experience is very good.
① Form verification (real-time verification whether the username is unique)
② Baidu drop-down search
③ No refresh paging
④ WebAPP mobile PHP background program (mobile APP)
demo01_rumen.html
demo01.php
Run results:
Remember: There is a prerequisite for using Ajax technology, you must create an Ajax object.
Based on IE core browser (IE browser below IE8, compatibility mode of various browsers)
var Ajax object = new ActiveXObject('Microsoft.XMLHTTP');
Based on W3C core browser (Firefox, Google Chrome, extreme speed mode of various browsers)
var Ajax object = new XMLHttpRequest();
① Create a public.js file as the core code base
② Define a $ function to obtain the DOM object with the specified id
③ Define a public function, such as createXhr(), for creating Ajax objects
Common methods
Parameter description:
header: request header
value: value
Parameter description:
content: Parameters passed in the blank line of the request. If it is a get request, this value is null
Common attributes
0: Indicates that the object has been created but not initialized. The createXhr method has been called, but the open method has not been called.
1: Indicates that the object has been initialized but not sent. The open method has been called, but the send method has not been called.
2: The send method has been called to make a request
3: Receiving data (part of it received)
4: Reception completed
If the server returns a string, use xhr.responseText to receive it
If the server returns data in XML format, use xhr.responseXML to receive it
① Create Ajax object
② Set callback function
③ Initialize Ajax object
④ Send Ajax request
⑤ Judgment and execution
demo04.php
demo05.php
1) Question: When we use Ajax, we find that we return data through echo statements on the server side. Can this place be replaced by return statements?
Answer: Although the echo statement and the return statement both have the meaning of return, the return positions of the two are different. The return statement returns data to the server, while the echo output mainly returns the output data to the client. (browser). Therefore, only the echo statement can be used on the server side and the return statement cannot be used.
2) Question: When sending an Ajax request, what will happen if the requested page does not exist?
Answer: If the server-side page we request does not exist, its Ajax will also return the following results:
However, in actual project development, if the above pop-up window appears, it will not be good for the user experience, so this behavior must be prohibited.
We can avoid the above situation by judging the server-side response status code:
The above code can also be further simplified into the following form:
3) Question: In actual project development, can the positions of the above judgment statements xhr.readyState==4 and xhr.status==200 be exchanged?
Answer: No, because in actual project development, the Ajax status code must be judged first. When it is 4, it means that the data returned by the server has been fully received, and status represents the time when readyState is equal to 4 is used to determine the server-side return status code, so the order between the two cannot be exchanged.
4) Question: How to debug Ajax during development?
① If it is an Ajax syntax error, we can capture it directly through the status bar of IE or the console in the Firebug plug-in in Firefox.
② Server-side error. If we find that the return result is abnormal during development, we can debug it through httpwatch or the network panel of the W3C browser.
httpwatch:
Firebug:
Google:
③ How to deal with logic errors encountered during development
demo06.php
Note: In actual application cases, we can complete the verification of whether the user name is unique through Ajax PHP. However, when running, we found that the above case will cause caching problems under the IE browser, resulting in the request result Abnormal, how to solve this problem in actual project development?
When we send a get request to a certain URL address for the first time under the IE browser, the system will automatically cache the requested resource file and store it in the client browser. We will Just call it "IE cache".
Microsoft uses caching technology in its own IE browser to allow users to quickly obtain server-side response data.
Implementation process: After the IE browser caches the requested resource file, the system will automatically call the cached file the next time a request is sent to the same URL. However, there is also a shortcoming in practical application: if the server-side data is updated, then we cannot obtain the latest data in real time.
Run results:
Note: Although we can use random numbers to artificially change the URL address of the request, so that the URL of each request is inconsistent. However, random numbers cannot guarantee that the random numbers generated are unique every time, and duplicates may also occur. In addition, cache files will be generated every time a request is made, so random numbers will generate a large number of cache files on the client side.
In actual development, we know that timestamps will never be repeated, so we can use this method to solve the cache problem.
Run results:
Note: Although we can use timestamps to solve the caching problem, it will also generate a large number of cache files on the client.
Cache core mechanism:
If we want to solve the caching problem, we can artificially change the value of If-Modified-Since so that it is inconsistent with the server's resource file every time it is checked to solve the caching problem.
Run results:
Note: Although the above program can solve the cache problem, does it also generate a large number of cache files?
Answer: No, because the URL address we request every time is the same, so it will only generate one cache file. When the second request is made, the system will only update the cache file. Will not be regenerated.
You can add the following menu to the server-side page, so that you can tell the browser not to cache the current page, thereby solving the cache problem:
The main function of the header function is to tell the browser to perform certain operations. The above code means telling the browser not to cache the current page. It needs to re-obtain the latest data every time it is requested, thus fundamentally disabling caching.
Run results:
The above program fundamentally disables caching, the ultimate solution.
① Different methods of passing parameters
The get request appends the parameters to the end of the URL when passing parameters.
When passing parameters in the post request, the parameters are appended to the request blank line position
② Different security
Post request is slightly more secure than get request
③ Parameter sizes are different when passing parameters
The maximum value when passing parameters in a get request is 2kb. In theory, there is no size limit for post requests. However, in actual project development, it is mainly affected by the php.ini file. Generally, the maximum value is 8M or 2M
④ The request header information is different
get request:
post request:
In comparison, the post request has one more request header information than the get request:
Content-type:application/x-www-form-urlencoded
Step 1: Create Ajax object
Step 2: Set the callback function
Step 3: Initialize the Ajax object
Step 4: Set request header information (set Content-type)
Step 5: Send Ajax request
Step 6: Judgment and Execution
demo08.php
demo09.php
The so-called XML is extensible markup language, which mainly realizes the transmission and storage of large batches of data.
PHP can implement XML parsing operations and provides a total of two solutions:
PHP DOM model (implementing addition, deletion and modification operations)
PHP SimpleXML model (implementing query operations)
1) PHP DOM model (non-standard DOM model)
① Open up memory space
② Load xml file into memory to form DOM tree structure
【Non-standard DOM model】
【Standard DOM Model】
The DOM model in Javascript is the standard DOM model. In practical applications, the main difference between the standard DOM model and the non-standard DOM model is:
Non-standard DOM model: Find a point à and output its value directly through the nodeValue attribute
Standard DOM model: Find a pointàFind its child nodeàOutput the text node value through the nodeValue attribute
Example: Using Ajax XML to return the four arithmetic results of two numbers
Knowledge to be used:
childNodes: Get all child elements of the current element and return data
demo10.php
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
