Home > Developer > Web Develop
Ajax can update a part of a webpage without reloading the entire page.
traditional Web pages (do not use AJAX) if you need to update the content, you must reload the entire page page。Next, it will be explained in the form of an exampleExample one: Creating a userin the case of non-refresh, when the user is created, it will be shown later: the user name already exists ; when the created user does not exist, it will be displayed later: The user name can be used;<body><div> Create user name: <input type= "text" id= "uid"/> <span id= "Xinxi" ></span> </div></body>
Call Ajax code as follows
<script type= "Text/javascript" >$ (document). Ready (function (e) { $ ("#uid"). blur (function () { // Blur lose focus trigger//Take out the contents of the text box var uid=$ (this). Val ()//Call Ajax$.ajax ({URL: "chuli.php",// Process page Data:{u:uid},/ /Pass Data , JSON data form, key:value multiple data separated by commas type: "POST", //Submit by datatype: "Text", //data type returned; text: Literal, string, JSON, Xmlsuccess:function (data) { ///callback function includes formal parameters, and date above does not matter if (data== "OK") {var str= "The user name can be used"; $ ("#xinxi") . html (str);} Else{var str= "<span style= ' color:red ' > The user name already exists </span>"; $ ("#xinxi"). html (str);},//When the call fails, call the method, (not commonly used) Error:function () {}});})When the code runs into a red font code, it runs the chuli.php code, as follows
<?php//accepts the passed parameter $uid=$_post["u"];//database include ("DBDA.class.php"); $db =new Dbda (); $sql = "SELECT count (*) from user Where uid= ' {$uid} ' "; $attr = $db->query ($sql); if ($attr [0][0]==1) //When the result equals 1, the user name already exists in the database. {echo "NO";} else{ echo "OK";}
Example two: User login
<body>
Ajax Code
<script type= "Text/javascript" >$ (document). Ready (function (e) { $ ("#btn"). Click (function () {var uid=$ ("# UID "). Val (), Var pwd=$ (" #pwd "). Val (); $.ajax ({url:" dengluchuli.php ", Data:{u:uid,p:pwd},type:" POST ", DataType:" TEXT ", success:function (data) {if (data==" OK ") {window.location=" ajax.php ";} Else{alert ("User name or password error"),}}); </script>Call processing code: dengluchuli.php
<?php$uid=$_post["U"]; $pwd =$_post["P"];include ("DBDA.class.php"); $db =new Dbda (); $sql = "SELECT count (*) from user Where uid= ' {$uid} ' and pwd= ' {$pwd} ' "; $attr = $db->query ($sql); if ($attr [0][0]==1] {echo" OK ";} Else{echo "NO";}
Key explanation: Asynchronous, synchronous interpretation of Ajax
When calling Ajax in JS, there is an async code
Async:false,//false synchronous, true async does not write by default to True async
In data transmission
Synchronization: The transfer must wait until the receiving party receives to transmit the next
Asynchronous: The transmission can continue without waiting for the other party to accept it
Ajax synchronization False:ajax must wait until processing is complete before continuing to transfer down
Ajax Async True (default): Ajax is processing the data while the code continues to executeTake the following example to explain
Test Ajax Async Case <div id= "text" style= "width:100px; height:100px; Background-color: #0FF "></div>
$ ("#text"). Click (function () {//Statement 1$ ("#text"). HTML ("");//Statement 2$.ajax ({//There is no async, so the default is async:true, async URL : "ajaxcl.php",//data:{}, //Because there is no data to transfer, so do not write//type: "POST", DataType: "TEXT", success:function (data) { ///Statement 4 $ ("#text"). HTML (data);}); /Statement 3alert ($ ("#sj"). html ());The processing page to be passed in is ajaxcl.php
<?phpecho "<div id= ' sj ' >hello world!! </div> ";Clicking on the blue area will result in "Statement 3", "Undefined", followed by a "statement 4" execution result in the blue box: Hello world!!
because statement 2 takes longer than statement 3, the execution result of statement 3 is displayed first: undefined; then the execution result of statement 4 is displayed, and this concludes.
In order to solve this problem, we need to add Async:false in Ajax, synchronize, wait until the end of processing statement 4, in the backward transfer processing statement 3, the result is as follows
Ajax Tutorial: "Create User" and "User login" exercises
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
