Summary of common problems in case of some common properties, events and methods of Ajax objects

Time:2020-11-27

Recently, I have been idle, so I took some time to sort out some things about Ajax methods. In the project, it is often found that many problems of Ajax plate are attribute, method, event case indistinguishable, which eventually leads to the trouble of program running.

  Here are some common properties, events, and methods of Ajax objects

1) The properties of standard Ajax objects are readyState, status, responseText, responsexml

2) non standard Ajax object attribute, for IE browser, there is ResponseBody, binary data stream. If you don’t consider browser compatibility, this property + VBScript can solve the garbled problem very well.  

Visual Basic code

Function bytes2bstr (VIN) '
   strreturn = ""
   for i = 1 to lenb(vin)
   thischarcode = ascb(midb(vin,i,1))
   if thischarcode < &h80 then
    strreturn = strreturn & chr(thischarcode)
   else
    nextcharcode = ascb(midb(vin,i+1,1))
    strreturn = strreturn & chr(clng(thischarcode) * &h100 + cint(nextcharcode))
    i = i + 1
   end if
   next
   Bytes2BStr = strreturn
End Function

3) Event onreadystatechange, state transition function

4) Methods setrequestheader, open, send are used to set the response header. When the submission method is specified as post, the content type should be set to application / x-www-form-urlencoded. If this response header is not set, the dynamic page of the request cannot obtain the value in the form of key value pairs, but the submitted data can be generated from the binary stream.

reference resources

How to get the submitted content when AJAX is specified as post but content type is not set or key is not specified

  Error prone problems

1) For objects created with XMLHttpRequest, including IE7 +, attributes are case sensitive. You must pay attention to the case problem. Otherwise, the attribute value is undefined. For example, readyState is written as readyState and responseText is written as responseText.

2) For IE browser, if the ActiveX object is judged first, it will execute ActiveX object to create XHR object. The XHR object, properties, events and methods created by ACX are not case sensitive

3) When creating with XMLHttpRequest, onreadystatechange must be all lowercase, or it is equivalent to assigning a custom property to the XHR object instead of the actual state transition function. This never performs a callback. Case insensitive XHR objects created by ie using activexobject are not case sensitive

4) As in points 2 and 3, when creating an XMLHttpRequest, the calling method must be case sensitive. If there is no error, it will prompt that the method cannot be found. Ie is created using ActiveX object and is not case sensitive.

It is particularly emphasized that the open method must be called before the setrequestheader method can be executed without error.

  Some suggestions for handwritten Ajax code

1) When submitting for get, there is no need to set the content type, unless some files with corresponding data format need to be generated by checking content type. For example asp.net Web service will check the content type. If the content type is application / JSON, the corresponding JSON format string will be generated.

2) When submitting for get, if there is no data, it is better to add a null as a parameter when calling the send method. xhr.send (null);

3) When submitting for post, do not forget to call the setrequestheader method after calling the open method, and set the content type to application / x-www-form-urlencoded

4) When using responseText, responsexml and ResponseBody [ie only], status attributes, you need to use them when readyState = = 4, status = = 200 [online test] or status = = 0 [local test]

JavaScript code

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("microsft.xmlhttp");
   xhr.open('get', 'index.html', true);
   xhr.onreadystatechange = function () {
     if (4 == xhr.readyState) {
       if (200 == xhr.status || 0 == xhr.status) {
         //=========Processing code after normal return
       }
       Else alert ('There's something wrong with the dynamic page '~');
     }
   }
   xhr.send(null);

5) If it is asynchronous, you need to add a state transition function, and then use the responseText or responsexml attribute when readyState bit 4.
For synchronous execution, you can directly use the responseText or responsexml attribute after sending, without adding the onreadystatechange state transition function. However, for synchronization, if the network speed is slow, it is easy to cause the browser to feign death, and the user experience is not good.

6) The simplest ~ ~ HOHO ~ ~ use jQuery framework instead.