Here is the main introduction (JavaScript Native ) The main steps of data request :

Ajax Data request steps :

1、 establish XMLHttpRequest object
2、 Ready to send data
3、 Execute send
4、 Specify the fallback function

First step : establish XMLHttpRequest object

 var xhr = new XMLHttpRequest(); // Standard browser
var xhr = new ActiveXObject('Microsoft.XMLHTTP'); // IE6

The second step : Use open() Method passes the parameter into

 xhr.open('get','./check.php?username='+uname+'&password='+pw,true); // get Request mode
xhr.open('post','./01check.php',true); // post Request mode 

The third step : Use send() Method sends the request to the value server

 xhr.send(null);       // get Request mode , The value of null
xhr.send( Request address );   // post Request mode , The value of Request address

Step four : Execute callback function

 xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 4 Indicates that the data returned by the server is ready for use , But this data is not necessarily normal
if(xhr.status == 200){ // there 200 Indicates that the data is normal
alert(xhr.responseText);
}
}
}
</script>

comprehensive :

 ==================================== html page ============================================
<form>
user name :
<input type="text" name="username" id="username"><span id="info"></span>
<br> password :
<input type="text" name="password" id="password">
<input type="button" value=" Sign in " id="btn">
</form> <script>
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value; // 1、 establish XMLHttpRequest object
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();// standard
}else{
xhr = new ActiveXObject("Microsoft");//IE6
} // 2、 Ready to send
xhr.open('post','post.php',true); // 3、 Perform the send action
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // Such as get This step is omitted
xhr.send('username='+uname+'&password='+pw); //post The request parameters are passed here , And it doesn't need transcoding // 4、 Specify the callback function
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 4 Indicates that the data returned by the server is ready for use , there 200 Indicates that the data is normal
var data = xhr.responseText;
if(data == '1'){
info.innerHTML == ' Login successful ';
}
else if(data == '2'){
info.innerHTML == ' Wrong user name or password ';
}else{
info.innerHTML == ' Server error ';
}
}
}
</script> =========================================== post.php page ========================================
<?php
$uname = $_POST['username'];
$pw = $_POST['password']; if($uname == 'admin' && $pw == '123'){
echo 1;
}else{
echo $uname;
}
?>

notes : The above is my personal understanding and summary of prototype chain , If there are any mistakes, please give me more advice !

Ajax --- More about data requests

  1. VueJS Build a simple background management system framework ( Two ) simulation Ajax Data request

    Development process , The interaction between the front desk and the background is inevitable , Most of the interaction is through Ajax Request to complete , When the development of the server is not completed , The front end needs to have one that can simulate Ajax Requested server . stay NodeJs In the environment , By configuring express addressable ...

  2. ajax Data request 5(php Format )

    ajax Data request 5(php Format ): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. ajax Data request 4(xml Format )

    ajax Data request 4(xml Format ): <!doctype html> <html> <head> <meta charset="utf-8" ...

  4. ajax Data request 3( Array json Format )

    ajax Data request 3( Array json Format ) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  5. ajax Data request 2(json Format )

    ajax Data request 2(json Format ) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. AJAX Data request

    ajax Data request requires four steps :( Request text content ) 1. establish XMLHttpRequest object : 2. Open the link to the service : 3. Send to the server : 4. Response ready . <!DOCTYPE html> & ...

  7. Wechat applet ajax Data request wx.request

    Wechat applet ajax Data request , Many students can't find api In which position , Here we separate the small program's ajax Ask to be listed , The request of wechat applet is wx.request This api,wx.request( Some object parameters ), Wechat Xiaocheng ...

  8. ajax Understanding of data requests

    One , request There are two ways to send a request :get Follow post . 1.get Only request data , It doesn't need to be processed by the server , Finally, the specified resource is returned . 2.post You can submit data , The server processes the submitted data , And then return the data . Two , establish X ...

  9. ajax Data request ( One ) The same domain

    Reference resources :http://www.css88.com/jqapi-1.9/jQuery.ajax/ http://www.cnblogs.com/haitao-fan/p/3908973.html 1. Commonly used ...

Random recommendation

  1. Firefox plug-in unit FlashGot establish Axel Download task

    Run script : #!/bin/sh# FlashGot Command line arguments template: [URL] [COMMENT] [FOLDER]if [ $# = 3 ]; th ...

  2. Slime :nginx Support at the same time asp.net And php

    This article is sponsored by xiuyilin Feng , It started in mud . After two days of experiment , Finally let nginx Support at the same time asp.net And php 了 . The specific configuration process is recorded as follows . Be careful : This experiment OS:centos6 64bit. all ...

  3. iframe No refresh cross domain upload file and get return value

    Usually we have a unified upload interface , This interface will be called by other services . If there are different domains , Also need no refresh upload file , And get the return value , It's a bit of a hassle . such as , Sina Weibo launched a new domain name www.weibo.com, But the interface still uses the original ...

  4. [Java]java Reflective essays

    Class is the soul of object-oriented , Everything can be abstracted by class . stay java In use , We may often use a reflective knowledge , It's just that other people have packaged it , Such as jdbc The load driver class has a sentence Class.for(“…jdbc…”).newI ...

  5. EXTJS 4.2 Information Control textfield in fieldLabel Remove the colon , Control label The length of

    Code : labelSeparator: '', // Get rid of laebl The colon in labelWidth: 10,// Control label The length of

  6. one Infos

    Backend Server is still running (PID:). Please try 'euc-server stop' first. ( The reason is simple , The process control script has no restart Function work ...

  7. Python File replication (txt file )

    function : This py The script is to put a txt file ( Source file ) Copy to another txt file ( The destination file ) Inside Algorithm ideas : The program first judges the source file ( use exists Function judgement ) And whether the destination file exists , If not, the output file path does not exist , If saved ...

  8. mysql Learning notes of ( 3、 ... and )

    1. Foreign key constraints ( Keep the data consistent , complete . Achieve one to many or one to one ) Parent table ( Reference table ) And sub table ( Tables with foreign key columns ) You have to use the same storage engine InnoDB, Temporary tables are prohibited . Foreign key columns and reference columns must have similar data types . The length of the number ...

  9. Neo4j Installing a plug-in APOC and GRAPH ALGORITHMS

    stay https://github.com/neo4j-contrib/neo4j-apoc-procedures/releases download apoc Expansion pack, JAR file stay https://github.co ...

  10. python 0,1 The question of ranks

    shape[0]-- That's ok A.min(0) --A Column minimum of , Generate a row vector >>> a = np.random.rand(3,3) >>> a array([[ ...