重温AJAX

  之前了解过AJAX，最近用的比较多，又重新温习一下，简单整理了一下，文中的英文注释全是小编自翻，可能不对或者不够好的地方，欢迎大家指正！

/** * 什么是AJAX * 异步JAVASCRIPT和XML（其中的A表示async,异步的） * @authors enlove ([e-mail]) * @date    2017-11-30 10:06:03 * @version $Id$ */function xmload(){var xmlhttp;if(window.new XMLHttpRequest){xmlhttp = new XMLHttpRequest();//create a object of XMLHttpRequest}else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp].status == 200){document.getElementById("enlove").innerHTML = xmlhttp.responseText;}}/** *send HttpRequest to server *we can use the function of open and send *the params of open: the first param is the method of sending HttpRequest to server, *there are two methods, one is "GET", and another one is "POST"; the second param is  *the url that you store your texts in your server; the last param whose type is boolean, *that true represent "async", false represent "sync" * * attention: function of send(string) only can be used when the method is "POST" */xmlhttp.open("GET","/try/ajax/enlove.txt",true);xmlhttp.send();}/** * GET or POST *  compare to POST, GET is faster and easier than POST, and GET can be used at most common, *  but  please use POST at following: *  *can not use cache(to update the file or DB on the server) *  *send great amount of data(POST have no limit of data) *  *send character that is unknown, POST is stable than GET *//** * above the following examples, the result is posssible caches * to avoid this, please add an unique ID to the url,like that  */ xmlhttp.open("GET","/try/ajax/enlove.txt?t="+Math.random(),true); xmlhttp.send(); /**  * if you want to send message by GET, please add information to URL  */ xmlhttp.open("GET","/try/ajax/enlove.txt?name=Henty&value=ford",true); xmlhttp.open(); /**  * if you have necessary to POST data like form of HTML, please use setRequestHeader() to add  * HTTP header. then add message that you want to send in function send.  */ xmlhttp.open("GET","/try/ajax/enlove.txt",true); xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");xmlhttp.send(name=Henty&value=ford);/** * for the developers of web, the AJAX is a big progress. It costs too much time to handle the masks on sever. Before AJAX, this can led to the applications stop or hang. * By AJAX, JavaScript have no need to wait the response from server, and  *  * handle other javascripts when waiting sever's responses *  * handle the js when the response is done *//** * Async = true * when the last param of function open is true, please provision(规定) the response at onreadystatechange's stauts. */xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp].status == 200){document.getElementById("enlove").innerHTML = xmlhttp.responseText;}}/** * Async = false */xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;/** * the event of onreadystatechange * when the requests are sent to server, we need to handle some masks based on response * when the readystate changes, it will trigger the events of onreadystatechange * the attribute of readyState store the status of XMLHttpReuqest. * next is the important attributes of XMLHttpReuqest. */    ________________________________________________________________________________ attributes           |     description ________________________________________________________________________________ onreadystatechange   | when the readystate changes, it will trigger the events of                        |onreadystatechange ________________________________________________________________________________  readyState          | store the status of new XMLHttpRequest, from 0 to 4                      |   0: the request is not intialization                      |   1: the connect to server is establish                      | 2: the request is recieved                      |   3: the resquet is handling                        |   4: the request is done, and response is onready ________________________________________________________________________________ status             |  200: OK      |  404: the pages are not found        ________________________________________________________________________________