JS implements Ajax Method Analysis and js implements ajax

JS implements Ajax Method Analysis and js implements ajax

This article provides an example of how to implement Ajax in JavaScript. We will share this with you for your reference. The details are as follows:

I. What is Ajax?

Read data or submit data without refreshing

(Ajax first appeared: Google Map, dragging to display a new field of view)

Applications: User Registration, online chat, and Weibo

Feature: data can only be read from the server (so we need to configure our own server program AMP)

Ii. Use Ajax

1. Basic: request and display static TXT files

btn.onclick=function(){  ajax('abc.txt',function(str){    alert(str);  });}

① The file encoding in Ajax must be consistent with the page encoding.

② Cache and block caching (benefits are greater than disadvantages, so you cannot clear cache at any time)
Cache can help us accelerate network access. The so-called cache is the file on the server. It is read-only once, and the second time it is taken directly from your hard disk and cache, instead of making requests through the network

Sometimes we need to block the cache (for example, something on the server has changed, but the client requests come from the original stuff). The method is as follows: add a timestamp:

Ajax('abc.txt? T = '+ new Date (). getTime (), function (str) {}); // new Date (). getTime () is the current number of milliseconds. It is absolutely impossible for the user to have two requests within one millisecond, so the t of each request is different.

2. Dynamic Data: Request Js (or json) files

Everything That Ajax reads from the server exists in the form of text (string). How can it be converted?

Eval () calculates the value in the string

ajax('abc.txt',function(str){    var arr=eval(str);    alert(arr);});

Example: Paging

<ul id="list"></ul><a href="#"></a><a href="#"></a><a href="#"></a>

window.onload=function(){  var oUl=getElementById("list");  var aBtn=getElementsByTagName("a");  var i;  for(i=0;i<aBtn.length;i++){    aBtn[i].index=i;    aBtn[i].onclick=function(){      ajax('page'+(this.index+1)+'.txt',function(str){        var aData=eval(str);        oUl.innerHTML='';        for(i=0;i<aData.length:i++){          var oLi=document.createElement("li");          oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';          oUl.appendChild(oLi);        }      });    };  }};

Iii. Ajax principles

HTTP Request Method

1. GET -- used to obtain data (such as browsing posts) put the data in a URL (website) to submit low security, low capacity, and easy to share (send the website to others)

2. POST -- used to upload data (such as user registration) put the data in a place where it is not a URL, which is secure, has almost unlimited capacity, and is not easy to share

4. encapsulate an Ajax Function

1. Create Ajax

2. Connect to the server

3. Send a request

4. Receive and return

Function ajax (url, fnSucc, fnFaild) {// 1. create var oAjax = null; if (window. XMLHttpRequest) {// For ie6, the error oAjax = new XMLHttpRequest (); // ie6 or above} else {oAjax = new ActiveXObject ("Microsoft. XMLHTTP "); // ie6} // 2. connect to the server, open (method, url, asynchronous or not) oAjax. open ('get', url, true); // 3. send a request to oAjax. send (); // 4. onReadyStateChange oAjax is returned. onreadystatechange = function () {// onreadystatechange event if (oAjax. readyState = 4) {// readyState property: Request status 4 is complete (completion does not indicate success) if (oAjax. status = 200) {// status attribute: Request result 200 indicates successful fnSucc (oAjax. responseText); // responseText attribute: content sent to us by the server} else {if (fnFaild) {fnFaild ();}}}};};