Home  >  Article  >  Backend Development  >  Detailed explanation of how to use ajax

Detailed explanation of how to use ajax

怪我咯
怪我咯Original
2017-07-13 15:05:502220browse

AJAX is a technology for exchanging data with a server that updates part of a web page without reloading the entire page. This article mainly introduces the relevant knowledge about the use of AJAX.

AJAX is an asynchronous transmission, partial refresh is very convenient and has many uses!

First, there are 4 steps for using AJAX:

1. Create an AJAX object

##var xmlHttp = new XMLHttpRequest();

2. Establish a connection ('Submission method', 'Url address')

xmlHttp.open(' get','./AJAX_XML.xml');

3. Determine ajax preparation status and status code

xmlHttp.onreadystatechange = function(){

    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

4. Send request

xmlHttp.send(null); //get method parameter is null, post method, the parameter is the submitted parameter

The following is an asynchronous submission of the user name (after entering the user name, the asynchronous submission will be judged by the background, and the front desk will immediately prompt whether it has been registered, and it will be judged when there is no need to submit!)

Submit by GET method

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据,要写null
  }
}
</script>

Username:

421386b101eb8d5ec278372a19030bc4

##xx.php

<?php
print_r($_GET);
?> 
1、 IE does not support Chinese

2、 =, & are confused with the keywords of the requested

string

.

POST submission

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+name);  
  }
}
</script>
Username :

306390a7801fb48b5463fcd9f5d4c11f

xx.php

<?php
print_r($_POST);
print_r($_GET);
?>
1. Send data through send()

2. SetRequestHeader() must be set to convert the passed parameters into XML format

3. Post submission can directly submit Chinese, no need Transcoding

4, characters in

post request

will also be confused with the & and = characters in the URL, so it is recommended to also use encodeURIComponent() encoding5 , At the same time as POST submission, GET submission can be performed

Solution

IE does not support Chinese =, & is confused with the keywords of the requested string Problem Just encode in js through encodeURIComponent().

window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据,要写null
  }
}

1. req.responseText: Get the returned string

2. req.responseXML: Get the returned data according to the DOM structure

The above is the detailed content of Detailed explanation of how to use ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn