Home > Developer > Web Develop
today, I learned a few Ajax methods, in fact, I very early in the company internship time to know it, but it knows nothing about it, also did not go to study it, today to learn it let me feel very excited because of the re-understanding of it, hey, the following to summarize the study today.
I. Writing Ajax in JavaScript
<script>window.onload=function () {document.getElementById ("txtname"). onblur =function () {varXML =NewXMLHttpRequest ();//1 First to create an asynchronous objectXml.open ("Get","jsajax.ashx",true);//2 Open the address you want to send in Get modeXml.onreadystatechange =function () {if(Xml.statustext = =4) {alert (xml.responsetext);//when the acceptance state equals 4, the value passed by the server has been accepted. }} xml.send (NULL);//send a message when the request sent for Get mode time is empty } } //window.onload = function () {//document.getElementById ("Txtname"). onblur = function () {//var xml = new XMLHttpRequest (); //Xml.open ("Post", "Jsajax.ashx", true); //Xml.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); //Xml.onreadystatechange = function () {//if (Xml.statustext = = 4) {//alert (xml.responsetext); // } // } //xml.send ("txtname=" +this.value)// } //}</script>"text"Name="txtname"Id="txtname"/></body> Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; stringName = Context. request.querystring["txtname"]; //String name = Context. request.form["Txtname"]; if(!string. IsNullOrEmpty (name)) {context. Response.Write ("your user name"+name +"available"); } Else{context. Response.Write ("your user name is not available"); } } above is Ajax written in JavaScript, Ajax is essentially a browser-side technology, the main purpose of Ajax technology is to local exchange of data between the client and server, the main character of this technology XMLHttpRequest is the ability to not reload the entire layout to update the data, That is, the so-called refresh without Reload (light refresh) and the communication between the server, completely through JavaScript, the use of XMLHttpRequest itself transmits a small amount of data, so the reaction will be faster, Also let the network program more like a desktop application, AJAX is the use of JavaScript in the background to quietly help you to the server to the data, and then by the JavaScript or DOM to help you render the results, because all the actions are made by JavaScript, So it saves the hassle of web page overloading, and users can not feel the pain of waiting. use XMLHttpRequest object Follow the pattern below You can XMLHttpRequest objects synchronously: Create objects,-new create requests,-open () send requests,-send (), but use JavaScript for trouble, and change the way you use jquery.
two. jquery writes Ajax
1.AJAX of $. Load event (Url,[,data][.callback])
<script src="Scripts/jquery-1.7.1.min.js"></script> <script>$ (function () {$ ("#Send"). Click (function () {$ ("#resText"). Load ("ajax.ashx", {txtemail:"[email protected]"}, Function (msg) {alert (msg); }); }); }); </script><body> <input type="Button"Value="Ajaxload"Id="Send"/> <divclass="Comment">comments already available</div> <div id="ResText"> </div></body> Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; stringemail = context. request.form["Txtemail"]; if(!string. IsNullOrEmpty (email)) {context. Response.Write ("<span> your e-mail address is"+email+"available </span>"); } Else{context. Response.Write ("<span> your e-mail address is"+ Email +"Not available </span>"); } }URL: Sent address, data: A key-value pair sent to the server, callback: callback function.
2.$. Get and $. Post Method
<script>$ (function () {//$ ("#send"). Click (function () {//$.get ("Jquery.ashx", {username: $ ("#username"). Val (), Content: $ ("#content"). Val ()}, function (msg) { //$ ("#resText"). HTML (msg); // }); //});$("#send"). Click (function () {$.post ("jquery.ashx", {username: $ ("#username"). val (), Content: $ ("#content"). Val ()}, function (msg) {$ ("#resText"). HTML (msg); }); }); }); </script><body> <form id="Form1"action="#"> <p> Reviews:</p> <p> Name: <input type="text"Name="username"Id="username"/></p> <p> content: <textarea name="content"Id="content"Rows="2"cols=" -"></textarea></p> <p><input type="Button"Name="name"Value="Submit"Id="Send"/></p> </form> <divclass="Comment">comments already available</div> <div id="ResText"> </div></body> Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; //String name = Context. request.querystring["username"]; //string content = Context. request.querystring["Content"]; stringName = Context. request.form["username"]; stringContent = Context. request.form["content"]; if(!string. IsNullOrEmpty (name) &&!string. IsNullOrEmpty (content)) {context. Response.Write ("<span>"+name+"Comments:"+content+"</span>"); } }URL: Sent address, data: A key-value pair sent to the server, callback: callback function.
3.$.ajax Method
<script>$ (function () {$ ("#send"). Click (function () {$.ajax ({type:"Post", URL:"1.js", DataType:"Script", Success:function (msg) {alert (msg); } }); }); }) </script>URL: Sent address, type: Requested type, timeout: request time, Beforesend is before request, complete: callback function, success: Successful callback function.
today is a simple summary here, it is very late, hehe, rest. Refueling Refueling!!!
Hey. A few ways to learn Ajax today
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
