Sister Flavor 6:ajax and Ajax encapsulation

（ functionAjax can and can only read files from the server ( Environment) requires a server environment to test, and you can use tools to establish a local server environment ( CacheFix cache problem: URL plus timestamp makes each request address unique, such as Url= ' Abc.txt ? t=' + new Date (). GetTime ();（ CodingThe requested file must be consistent with the encoding of the Web page, otherwise garbled ( processing） eval ()Processing request results is convenient, automatic segmentation. But it is said that Eval has many problems, except for Ajax, the rest of the place do not use. （ ExampleRequest data and display within the same block, JSON data processing, paging data requests Ajax functions Four steps:1. Create an Ajax object 2. Connect to server 3. Send request 4. Receive returnUse a non-existent variable : Error
With a non-existent attribute : undefined Ajax wrapper functions (can be used directly):Begin ----------------------------------------------------------------------- ------------------------- ------------------------- ------------------------- ------------------------- -------------------------function ajax (URL, fnsucc, fnfaild) {
1. Creating an Ajax Object
var oajax=null;
if (window. XMLHttpRequest) {//For IE6, window. XMLHttpRequest is a undefined attribute, false; Other browsers are present and true. If this is XMLHttpRequest, then IE6 can not pass, error.
Oajax=new XMLHttpRequest (); IE6 don't recognize
}else{
Oajax=new ActiveXObject ("Microsoft.XMLHTTP"); IE6 Exclusive
}

2. Connect to the server
Oajax.open (' GET ', url, true); Open (method, URL, whether asynchronous)

3. Sending the request
Oajax.send ();

4. Receive return
onReadyStateChange
Oajax. onreadystatechange=function () {
if (Oajax. readyState==4) {// Request StatusCompleted: 0 uninitialized, 1 send request, 2 Receive all response content, 3 parsing of encrypted content, 4 content parsing complete can be used
if (Oajax. status==200) {// Request Result: The content of the specified URL has been successfully obtained.
FNSUCC ( Oajax.responsetext); Sets the parsed result as an argument to the passed-in success function, using subsequent function actions
}else{
if (fnfaild) {//If the Get content fails and there is a failure handler function, execute
Fnfaild ();
}
}
}
};
}//End ---------------------------------------------- ------------------------- ------------------------- ------------------------- ------------------------- ------------------------- -------------------------      Request Status Monitoring
onreadystatechange Events
ReadyState Property: Request Status
0 (uninitialized) has not yet called the Open () method
1 (load) the Send () method is called and the request is being sent
2 (loading complete) the Send () method completes and all responses have been received
3 (parsing) parsing response content
4 (complete) The response content resolution is complete and can be invoked on the client
Status Property: The result of the request (200: success; 404, 300+, the researcher: all errors, such as not found files)
ResponseText: Requested Content    // Simple Ajax () uses(timestamp) =============================================================//must first introduce the above encapsulated Ajax () function window.onload=function () {
var Obtn=document.getelementbyid (' btn1 ');
Obtn.onclick=function () {
Ajax (' abc.txt?t= ' +new Date (). GetTime (), function (str) {
alert (str);
});
};
}    // request 1.txt 2.txt 3.txt to the server and display it in the same content box=======================================//must first introduce the above encapsulated Ajax () function window.onload=function () {
var abtn=document.getelementsbytagname (' input ');
var Odiv=document.getelementbyid (' Div1 ');
var i=0;

for (i=0;i<abtn.length;i++) {
Abtn[i].index=i;
Abtn[i].onclick=function () {
Ajax (this.index+1+ '. txt?t= ' +new Date (). GetTime (), function (str) {//function (str) {} After successful execution of anonymous functions. ODIV.INNERHTML=STR;
});
};
}
}; // eval () split the results===========================================================//normal array data processing window.onload=function () {
var Obtn=document.getelementbyid (' btn1 ');
Obtn.onclick=function () {
Ajax (' data.txt?t= ' +new Date (). GetTime (), function (str) {
Str-> ' [1,2,3,4] '
var arr=eval (str);
Alert (arr[3]); //At this time the result is 4. If the eval () is not processed then the returned result is a string with a result of 2
});
};
}  // JSON data processingWindow.onload=function () {
var Obtn=document.getelementbyid (' btn1 ');
Obtn.onclick=function () {
Ajax (' data.json?t= ' +new Date (). GetTime (), function (str) {
str-> [{a:12, b:5}, {a:8, b:9}]
var arr=eval (str);
alert (ARR[0].B); At this point the result is 5. Eval () splits the data into multidimensional arrays
});
};
}    // Paging Data Requests====================================================================//must first introduce the above encapsulated Ajax () function window.onload=function ( ){
var Oul=document.getelementbyid (' Ul1 ');
var abtn=document.getelementsbytagname (' a ');
var i=0;

for (i=0;i<abtn.length;i++) {
Abtn[i].index=i;
Abtn[i].onclick=function () {
The three file names that need to be requested are: Page1.txt page2.txt page3.txt
Ajax (' page ' + (this.index+1) + '. txt?t= ' +new datd (). GetTime (), function (str) {
var adata=eval (str);

Oul.innerhtml= ";
for (i=0;i<adata.length;i++) {
var oli=document.createelement (' Li ');
The data in Page1.txt is: [{User: ' Blue ', pass: ' 123 '}, {User: ' AAA ', pass: ' Jjfhier '}, {User: ' Leo ', pass: ' 123456 '}] (another two similar)
Oli.innerhtml= ' <strong> ' +adata[i].user+ ' </strong><i> ' +adata[i].pass+ ' </i> '; The output format here changes as needed
Oul.appendchild (OLi);
}
});
};
}
}

<body>
<ul id= "UL1" >
</ul>
<a href= "javascript:;" >1</a>
<a href= "javascript:;" >2</a>
<a href= "javascript:;" >3</a>
</body>

Sister Flavor 6:ajax and Ajax encapsulation