Discussion on the internal mechanism of Ajaxpro-asp.net the combination of Ajax technology (2)

Ajax|asp.net

V. Invoke function

The Invoke function is the core, and the flowchart I've drawn earlier has simply described its main process. But this function is too important, here is a list of all its source code:

1ajaxpro.request = Class.create ();
2ajaxpro.request.prototype = (new Ajaxpro.base ()). Extend ({
3 Invoke:function (method, data, callback) {
4 var async = typeof Callback = = "function" && callback!= ajaxpro.nooperation;
5 var json = Ajaxpro.tojson (data) + "\ r \ n";
6
7 if (Ajaxpro.cryptprovider!= null)
8 JSON = AjaxPro.cryptProvider.encrypt (JSON);
9
Ten this.callback = callback;
11
if (async) {
this. Xmlhttp.onreadystatechange = This.doStateChange.bind (this);
(typeof this.onloading = = "function") this.onloading (true);
15}
16
this. Xmlhttp.open ("POST", This.url, async);
this. Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
this. Xmlhttp.setrequestheader ("Content-length", json.length);
this. Xmlhttp.setrequestheader ("Ajax-method", method);
21st
if (Ajaxpro.token!= null && AjaxPro.token.length > 0)
this. Xmlhttp.setrequestheader ("Ajax-token", Ajaxpro.token);
24
if (MS). Browser.isie)
Num this. Xmlhttp.setrequestheader ("accept-encoding", "gzip, deflate");
/Else
this.    Xmlhttp.setrequestheader ("Connection", "close"); Mozilla Bug #246651
29
if (this.ontimeout!= null && typeof this.ontimeout = = "function")
This.timeouttimer = settimeout (This.timeout.bind (this), this.timeoutperiod);
32
this. Xmlhttp.send (JSON);
34
JSON = NULL;
data = null;
Panax Notoginseng Delete json;
Data delete;
39
if (!async) {
This.createresponse return ();
42}
43
The return is true;
45}
46});
47

Well, it's quite complicated. We looked slowly.

The Ajaxpro.request class, of course, is not only Invoke a function, where other functions are omitted. Well, we see that ajaxpro.request also "inherited" from Ajaxpro.base.

The 4th line of async, literally understood to mean asynchronous, what does this line mean? Well, if the incoming callback type is a function, and it's not an operation, it's considered asynchronous.

5th line of JSON, it's pretty important. Here, we call the Ajaxpro.tojson method to encode the incoming data in this case, which is, of course, the string value we entered in the TextBox from Dotest1_next, and the implementation of this function, which is no longer listed, can be seen in the CORE.ASHX files.

Next line 7th to 8th, if encryption is provided, then the JSON is encrypted. This is a good understanding.

Line 12th to 15th, if it's asynchronous, then bind the Dostatechange function to the onReadyStateChange event. Well, the binding here is actually in the Core.ashx file declared a method, this article no longer elaborated its implementation, we are interested, you can go to see. When the binding is complete, the Dostatechange function is invoked when the service side completes the operation, and the work of changing the page can be made. In addition, the Onloading event is also detected here.

Line 17th to 33rd is the core code, we know Ajax is the use of XMLHttpRequest to complete the page without refreshing. Here we can see this. XMLHttp is used for the request encapsulation. It is worth noting that the json.length,ajax-method used by Content-length is the name of the Ajaxmethod method that is passed in, in this case echoinput. 30th, 31 lines set the timeout processing, of course, the page can not Deng well. Line 33rd sends JSON to the service side.

Next line 41st, we see that if it's not an asynchronous operation, the Createresponse function is called directly here to get a response. What if it's an asynchronous operation? Remember when we set the Dostatechange? The asynchronous return processing is the thing. The Createresponse function is described later.

Vi. interpretation of "inheritance"

In front of us several times to see seemingly inherited. Of course they are just seemingly. Take a look at the code in the following core.ashx and see:

1object.extend = function (destination, source) {
2 for (property in source) {
3 Destination[property] = Source[property];
4}
5 return destination;
6}
7
Haha, the so-called "inheritance" is actually just a copy of the attributes.

Seven, this. Where did XMLHttp come from?

Before we see this. XMLHttp Great Divinity. So where did it come from? Look at the Initialize function of the Ajaxpro.request class (abridged):

1initialize:function (URL) {
2 this. XMLHttp = new XMLHttpRequest ();
3}
4
Yes, XMLHttp is just an example of XMLHttpRequest. What about the definition of XMLHttpRequest?

1var lastclsid = null;
2if (!window. XMLHttpRequest) {
3
4 function Getxmlhttp (CLSID) {
5 var XMLHttp = null;
6 try {
7 XMLHttp = new ActiveXObject (CLSID);
8 lastclsid = CLSID;
9 return XMLHttp;
Ten} catch (ex) {}
11}
12
The window. XMLHttpRequest = function () {
if (lastclsid!= null) {
Return getxmlhttp (LASTCLSID);
16}
17
var XMLHttp = null;
var CLSIDs = ["msxml2.xmlhttp.6.0", "msxml2.xmlhttp.5.0", "msxml2.xmlhttp.4.0", "msxml2.xmlhttp.3.0", "MsXML2.XMLHT tp.2.6 "," microsoft.xmlhttp.1.0 "," MICROSOFT.XMLHTTP.1 "," Microsoft.XMLHTTP "];
20
for (var i=0; i<clsids.length && XMLHttp = null; i++) {
XMLHttp = Getxmlhttp (Clsids[i]);
23}
24
if (XMLHttp = null) {
Return to New Iframexmlhttp ();
27}
28
return XMLHttp;
30}
31}
32
Oh, it was actually created here. After all, it's still a activexobject. There is no more mention of this article. But the point to note in the code is that
What if you've dealt with a whole bunch of clsids in the 19th row and haven't gotten an object yet? Notice that line 26th is new to a iframexmlhttp.

Iframehttp is defined in Core.ashx, which basically simulates the functionality of the ActiveXObject object. Want to study, look at the source of their own it. Space is limited, here is not much to say.

Eight, Dostatechange function

Well, as mentioned earlier, the Dostatechange function will be executed at the end of the server and look at its source code:

1dostatechange:function () {
2 if (this.onstatechanged!= null && typeof this.onstatechanged = = "function")
3 try{this.onstatechanged (this. Xmlhttp.readystate); }catch (e) {}
4
5 if (this. Xmlhttp.readystate!= 4)
6 return;
7
8 if (this. Xmlhttp.status = = 200) {
9 if (This.timeouttimer!= null) cleartimeout (This.timeouttimer);
Ten if (typeof this.onloading = = "function") this.onloading (false);
11
this. Xmlhttp.onreadystatechange = ajaxpro.nooperation;
13
This.callback (This.createresponse ());
This.callback = null;
16
this. Xmlhttp.abort ();
18}
19},
20
If the status is 200, that is OK, then clear out the timeout handler function, handle the Onloading event, and finally use callback to invoke the Createresponse function. Remember that if it's not asynchronous, Createresponse will call directly instead of through the Dostatechange bar.

Nine, Createresponse function

1createresponse:function () {
2 var r = new Object ();
3 r.error = null;
4 r.value = null;
5
6 var responsetext = new String (this. Xmlhttp.responsetext);
7
8 if (Ajaxpro.cryptprovider!= null && typeof Ajaxpro.cryptprovider = = "function")
9 ResponseText = AjaxPro.cryptProvider.decrypt (responsetext);
10
One eval ("R.value =" + ResponseText + ";");
12
if (r.error!= null && this.onerror!= null && typeof this.onerror = "function")
try{This.onerror (r.error);} catch (e) {}
15
ResponseText = null;
17
return R;
19}
If the previous JSON is the Request is too dense, here you need to decrypt the responsetext. The r.value,r will be returned and supplied to the callback function. In this case, the final return dotest1_callback,r is passed into its res parameter. Finally, the string under the text box is updated, and the entire Ajax ClientScript process is almost complete.

Ten, a brief summary

Exhale, and grow a sigh of relief. Finally can be ended, Ajaxpro service side of the dismantling over a period of time to talk about it.

In the analysis of the clientscript end of the time is really great feeling, JavaScript is actually far more powerful than people think and useful. In fact, like most people, I was very cold at first, but there were two things that changed my mind. One is to read the jack into the "in-depth analysis of asp.net component design," found that many of the original powerful dazzling asp.net control, in fact, are used in the JavaScript implementation. The second is in the study of a foreign document browser implementation, found that the use of JavaScript in IE is quite perfect to achieve a strong flexibility like a desktop program interface and function, really surprised. At that time found his knowledge of JavaScript is seriously embarrassed, ashamed of no ground. Helpless usually do not have much time to learn to improve themselves, can only occasionally draw free time to understand, recharge it.

Scripts such as JavaScript are bound to be used in future WEB applications.