Home > Developer > Web Develop
First, Ajax introduction
Ajax (asynchronous JavaScript and XML)-- Asynchronous Refresh technology
Key elements of Ajax include the following:
①javascript language: The main development language of Ajax technology.
②xml/json/html: A data format used to encapsulate requests or responses
③dom (Document Object Model): Modifying page elements through DOM properties or methods, enabling page local Refresh
④CSS: Change style, beautify page effect, improve user experience
⑤ajax Engine: The XMLHttpRequest object that asynchronously passes data between the client and the server.
Second, Ajax workflow
Three, common methods:
Iv. Common Properties
Five, realize the idea:
1. Lock User Name text box, register onblur Event
2. Create a XMLHttpRequest object. Through window. XMLHttpRequest return value determines how the XMLHttpRequest object is created
3, set the callback function. Set the callback function with the onReadyStateChange property, where the callback function requires a custom
4. Initialize the XMLHttpRequest object. Set the send and path of the request via open ()
5. Send Request
To prepare a simple page:
<body> Username:<input type= "text" name= "txtname" id= "txtname"/> <span id= "MSG" ></span ><br/><br/> <input type= "password" name= "txtpwd"/> </body>
Create servlet: Loopback information
Public voidDoPost (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {String uname= Request.getparameter ("uname"); if(Uname.equals ("admin")) { //the user has already been registered//Loopback Informationresponse.getwriter (). Write ("OK"); }Else{response.getwriter (). Write ("NO"); }
Note:
Step one: through window. The return value of XMLHttpRequest determines how the current browser creates XMLHttpRequest objects. If true, the description is a new version of IE or another browser, you can use new XMLHttpRequest () mode to create the XMLHttpRequest object, if False, the old version of IE browser, you need to use the new ActiveXObject (" Microsoft.XMLHTTP ") to create the XMLHttpRequest object
Step Two: set the callback function through the onReadyStateChange property of the XMLHttpRequest object to receive the data returned by the server when the request succeeds
Step three: through the XMLHttpRequest object's open () method, the incoming parameter completes the initialization of the XMLHttpRequest object. The first parameter is the HTTP request mode, which selects the Send HttpGet request, so the parameter is get. The second parameter is the URL request path to send, and the data to be sent is appended to the URL path
Step four: call the Send () method of the XMLHttpRequest object, and the parameter is the data to be sent to the server side, since the parameter has been appended to the URL path after a "get" request, so it is set directly to null. If the Send () method does not set a value, there may be incompatibility problems under different browsers.
When execution is complete, the asynchronous request is sent to the end of the process!
Note: The use of Ajax to send post requests should be noted to set setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
When sending a request in a Get mode, it is common to append the required parameters to the URL path, so send () does not need to pass parameters, set to NULL
Vi. using jquery for Ajax
Common Ajax Methods for jquery
Syntax: $.ajax ([Settings]);
Common attribute Parameters:
Common function Parameters:
use $.ajax () to verify user name-- using $.ajax () to implement asynchronous interactions
Note: Need to draw Jquery-1.11.1.js Library
$ (function () {var dom=$ ("#txtName"); Dom.blur (function () {myjquery (); }); }); function Myjquery () {var dom=$ ("#txtName"); $.ajax ({URL:' <%=path%>/servlet/checkuserservlet ', type:' Post ', Data:{uname:dom.val ()}, success:function (result) {alert (result); } }); } </script> User name:<input type= "text" name= "txtname" id= "txtname"/> <span id= "MSG" ></span><br/><br/>Password:<input type= "Password" name= "Txtpwd"/> </body>
Implementation results:
If you enter a non-admin, you can register, or you can not register
If the post request, the debugging effect is as follows:
Vii. introduction of JSON
JavaScript Object notation is a lightweight data interchange format
① Defining JSON objects
Syntax: Var json object ={key:value,key:value,...}
② Defining JSON arrays
Syntax: var json array =[value,value,...]
<script type= "Text/javascript" > var data={"FirstName": "Brett", "lastName": "Hehe"}; $.each (Data,function (i,dom) { alert (DOM); /* var data={ "People": [ {"FirstName": "Brett", "LastName": "McLaughlin", "email": "AAAA"}, {" FirstName ":" Jason "," LastName ":" Hunter "," email ":" BBBB "}, {" FirstName ":" Elliotte "," LastName ":" Harold "," Email ":" CCCC "} ]};$.each (Data.people,function (i,dom) { alert (dom.firstname); }); */ </script> Then you can get each DOM object:
Ajax and jquery, JSON
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
