Prototype. js Ajax. Request learning notes (1)-Java-blue-blogjava along the way

Guidance:
Java --- you have blue along the way
I like to fly on the keyboard and try to make every line of code as beautiful as possible.
49 essay: 22 Article: 95 comment: 0 trackbacks
In the past two days, I made some things using Ajax. Request in prototype. js. I read the source code and realized the following:
Before using the Ajax section, you need to know the following functions:
Class variable
VaR? Class? =? {
Create :? Function ()? {
Return? Function ()? {
This. Initialize. Apply (this ,? Arguments );
}??}}
Initialize is equivalent to the constructor. Like java constructor, initialize can be customized with parameter properties. Many objects in prototype are created using it, and Ajax is no exception.
Try. These () method
VaR? Try? =? {
These :? Function ()? {
VaR? Returnvalue;
For? (VAR? I? =? 0? I?

VaR? Lambda? =? Arguments [I];
Try? {
Returnvalue? =? Lambda ();
Break ??????}? Catch? (E )? {}????}???? Return? Returnvalue;
}}
It makes it easy to implement this requirement when you want to call different methods until one of them is successful and normal, he uses a series of methods as parameters and executes these methods one by one in sequence until one of them is successfully executed, and returns the return value of the method that is successfully executed.
Ajax is used to obtain an XMLHTTP cross-borswer:
VaR? Ajax? =? {
Gettransport :? Function ()? {
Return? Try. These (
Function ()? {Return? New? Activexobject ('msxml2. xmlhttp ')},
Function ()? {Return? New? Activexobject ('Microsoft. xmlhttp ')},
Function ()? {Return? New? XMLHttpRequest ()}????)? |? False ??}?? Activerequestcount :? 0}
Object. Extend method:
Object. Extend? =? Function (destination ,? Source )? {
For? (Property? In? Source )? {
Destination [property]? =? Source [property];
}?? Return? Destination;
}
As the name suggests, an object property list can be expanded. In this case, you may not be quite familiar with Ajax,
Ajax. Base. prototype? =? {
Setoptions :? Function (options )? {
This. Options? =? {
Method :??????? 'Post ',
Asynchronous :? True,
Parameters :??? '
}???? Object. Extend (this. Options ,? Options? |? {});
},
}
We can see that when Ajax is used in prototype, there are three options by default. The default value is as shown above. Here, we can change the default value through the following methods (Ajax. Request usage, and later ):
VaR? Pars? =? 'Method = Update & mbid = 917 '; var? My? =? New? Ajax. Request (
Uri ,?
{
Method :? 'Post ',
Parameters :? Pars,
Asynchronous :? False,
});
}
At this time, a problem may not be well handled. If you want to add other parameters, how do you know if the parameters I have added comply with prototype? Yes! For example, what parameters should I use to transmit a piece of data to the background through the send method? The following code is available in prototype:
VaR? Body? =? This. Options. postbody ??? This. Options. postbody? :? Parameters; this. Transport. Send (this. Options. method? ==? 'Post '??? Body? :? Null );
It can be seen that it should be postbody. For prototype parameters and their meanings, I still want to find them one by one through the source files. The author does not have an initial set (nonsense, or the object. Extend method is not required ). I think this place needs to be improved ......
When sending, the method must use post to take effect, and parameters will become invalid at this time. The source code is as follows:
If? (This. Options. method? ==? 'Get '? &&? Parameters. Length?>? 0)
This. url? + =? (This. url. Match (//? /)??? '&'? :? '? ')? +? Parameters;
Therefore, if the backend must have a parameter, for example, if struts's lookupdispatchaction is used, a method parameter may be required. In this case, you should put it directly in the URI. The last note is that when using post, be sure to set the response header to Content-Type = application/X-WWW-form-urlencoded. fortunately, prototype has taken this into consideration:
This. setrequestheaders (); // The specific code can be seen in the source file var? Body? =? This. Options. postbody ??? This. Options. postbody? :? Parameters; this. Transport. Send (this. Options. method? ==? 'Post '??? Body? :? Null );
Here I will talk about the solution to garbled Characters During Ajax usage:
From the C to s header, the s side receives garbled code to solve the analysis process. First, you must understand that AJAX uses UTF-8 to encode and transmit data. The data we see on the page is decoded according to our own character set. OK. Now let's assume that we have received garbled data from C on the send, No matter what encoding method your web page uses) ajax decodes the transmitted data into the UTF-8 format during its transmission. At the end of the S, I may filter the encoding for all request methods, such as the following settings:
　　 Encodingfilter ?? ??? Com. characterencodingfilter
　　 ??? Encoding ??? GBK ?? ??
　　
So what we see in the S end is the data that will be encoded by the UTF-8 and then decoded by GBK, so garbled out. So the solution is also very simple. It's okay to encode it again in your own way.
New String (Str. getbytes ("GBK"), "UTF-8 ");
Similarly, if the C side encounters garbled characters, the data is transmitted in the UTF-8 format before the s side returns the data.
SRC. getbytes ("UTF-8 ")
Event Response in Ajax. Request:
First, we need to add the response status and user-defined functions to the request initialization:
VaR? My? =? New? Ajax. Request (
URL ,?
{
Method :? 'Get ',
Parameters :? Pars,
Asynchronous :? True,
Oncomplete :? Showresponse
});
It initializes a set of Ajax events.
Ajax. Request. events? = ?? ['Uninitialized ',? 'Loading ',? 'Loaded ',? 'Interactive ',? 'Complete'];
These five States correspond to exactly five readystates, and the five readystates of Ajax are as follows:
0 (not initialized) the object has been created, but has not been initialized (the open method has not been called)
1 (initialization) the object has been created and the send method has not been called
2 (send data) The send method has been called, but the current status and HTTP header are unknown.
3 (in data transmission) Some data has been received. Because the response and HTTP headers are incomplete, an error occurs when retrieving part of data through responsebody and responsetext,
4. After receiving the data, you can use responsebody and responsetext to obtain the complete response data.
Then, according to the status (Click here to download and view Ajax references and view all its attributes) to trigger the specified event and trigger the Code:
Onstatechange :? Function ()? {
VaR? Readystate? =? This. Transport. readystate;
If? (Readystate ?! =? 1)
This. respondtoreadystate (this. Transport. readystate );
}? Respondtoreadystate :? Function (readystate )? {
VaR? Event? =? Ajax. Request. events [readystate];
Again, we can see that the event set exactly corresponds to readystate, and the following is used to call the Web custom function showresponse ()
Try? {
(This. Options ['on '? +? Event]? |? Prototype. emptyfunction) (Transport ,? JSON );
Ajax. Responders. Dispatch ('on '? +? Event ,? This ,? Transport ,? JSON );
}? Catch? (E )? {
This. dispatchexception (E );
}
Unfinished, To be continued...