JS Implementation Ajax method Analysis _javascript Skills

In this paper, the method of realizing Ajax by JS is analyzed. Share to everyone for your reference, specific as follows:

One, what is Ajax

Read data or submit data without refreshing

(first appeared Ajax: Google Maps, drag a new view of the show)

Applications: User registration, online chat, micro blog

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

Second, the use of Ajax

1. Base: request and display static TXT file

Btn.onclick=function () {
  ajax (' Abc.txt ', function (str) {
    alert (str);}
  );

①ajax the encoding of the file should match the encoding of the page.

② caching, blocking caching (the benefits outweigh the drawbacks, so you can't always clear the cache)
Caching can help us speed up network access, the so-called cache, is the server on this file, it only read once, the second time from your hard disk, the cache directly to fetch, rather than really through the network to request

Sometimes we need to block the cache (like things on the server change, but the client request is the original thing), the method is as follows, add time stamp:

Ajax (' abc.txt?t= ' +new Date (). GetTime (), function (str) {});
The new Date (). GetTime () is the current number of milliseconds, and it is absolutely impossible for the user to point two times within 1 milliseconds, so each request has a different t.

2. Dynamic Data: Request JS (or JSON) files

All the things that Ajax reads from the server are in the form of text (strings), and how do you convert them?

Eval () computes 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);}};

Third, the principle of Ajax

HTTP request method

1.get--used to get data (such as browsing posts) to put data in a URL (Web address) To submit security, low capacity, easy to share (send the address to others)

2.post--for uploading data (such as user registration) place the data where it is not a URL security general, capacity almost unlimited, not easy to share

Iv. encapsulating an AJAX function of your own

1. Create Ajax

2. Connecting to the server

3. Send Request

4. Receive return

function Ajax (url,fnsucc,fnfaild) {
  //1. Create
  var oajax=null;
  if (window. XMLHttpRequest) {//For IE6, the direct use of XMLHttpRequest is non-existent will be error
    oajax=new XMLHttpRequest ()//ie6 above}else{
  oajax=
    New ActiveXObject ("Microsoft.XMLHTTP"); IE6
  }
  //2. Connect the server, open (method, URL, asynchronous)
  Oajax.open (' Get ', url,true);
  3. Send request
  oajax.send ();
  4. Receive return onreadystatechange
  oajax.onreadystatechange=function () {    //onreadystatechange event
    if ( oajax.readystate==4) {//readystate property: Request Status 4 is complete (completion does not represent success)
      if (oajax.status==200) {//status property: Request result 200 represents success
        FNSUCC (Oajax.responsetext); ResponseText property: Server sends back content to us
      }
      else{
        if (fnfaild) {
          fnfaild ();
}}}};

More readers interested in JavaScript-related content can view this site: "JavaScript Ajax Operating Skills Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.