Getting Started with Ajax

What happens without Ajax? The normal ASP. NET will refresh the current page every time the service-side method is executed. In the process of Youku watching the video, if you submit a comment, the page will not be refreshed and the video will not be interrupted. Develop a look effect: with <video src= "Diaosi.mp4" AutoPlay controls></video> play video (only the browser that supports HTML5 can play), and then put a comment function, The server simply saves to a file.Second, Ajax is a kind of page local asynchronous refresh technology. Use Ajax to send requests to the server and get the data returned by the server and update it to the interface, not the entire page refresh, but instead use JavaScript to create the XMLHttpRequest (XHR) object in the HTML page to make a request to the server and get the returned data. In the page, the HTTP request is issued by XMLHttpRequest and the return data of the server is obtained so that the page is not refreshed. XMLHttpRequest is the core object of Ajax. Local: A small part of the refresh, the other part does not refresh; Async: During a network request, the browser does not card.1) Ajax code:
Before looking for a job, be sure to write the following code behind your back.
　　

varxmlhttp = window. XMLHttpRequest?NewXMLHttpRequest ():NewActiveXObject ('Microsoft.XMLHTTP');//Create XMLHTTP objects, consider compatibilityXmlhttp.open ("POST","ajaxtest.ashx?i=5&j=10",true);//"Ready" to issue a POST request to the server's GETDATE1.ASHX (get may have a cache problem), the POST request browser must not be cached. No request has been made here. True represents an asynchronous request. Xmlhttp.onreadystatechange =function () {if(Xmlhttp.readystate = =4)//ReadyState = = 4 indicates that the server has returned the completed data. may have experienced 2 before (request sent, in process), 3 (part of the data in response is available, but the server has not completed a response generation)                {                    if(Xmlhttp.status = = $)//If the status code is 200, it is successful .{alert (xmlhttp.responsetext); }                    Else{alert ("The AJAX server returned an error! "); }                }            }

View Code

Do not think if (xmlhttp.readystate = = 4) {Execute before send!!!!
Xmlhttp.send (); Only then does the request begin to be sent
When the request is made and the server returns data, it continues to execute downward, so it does not block and the interface is not jammed, which is the meaning of "A" in Ajax "Async". Try to add a sentence of Thread.Sleep (3000) in ashx;
2) Extra Point, if you want to send a newspaper style in the Send method, such as Send ("name=5"), you need to set the Content-type header:
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Otherwise, the server side is unable to pass the context. request["name"] gets the value.three, encapsulate an AJAX function yourselfCode: A simple AJAX package:

function Ajax (url,onsuccess,onfail) {varxmlhttp = window. XMLHttpRequest?NewXMLHttpRequest ():NewActiveXObject ('Microsoft.XMLHTTP'); Xmlhttp.open ("POST"Urltrue); Xmlhttp.onreadystatechange=function () {if(Xmlhttp.readystate = =4)                {                    if(Xmlhttp.status = = $) {onsuccess (xmlhttp.responsetext); }                    Else{onfail (xmlhttp.status); }}} xmlhttp.send (); //only then does the request begin to be sent

View Code

Iv. Ajax Case: Check if the user name is available
Case code:
Html

HTML:<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title></title>    <Scripttype= "Text/javascript"src= "Jquery-1.5.2.js"></Script>    <Scripttype= "Text/javascript"src= "Rpajax.js"></Script>    <Scripttype= "Text/javascript">        $(function () {            $("#username"). Blur (function () {                varusername= $("#username"). Val (); Ajax ("checkusername.ashx?username="+username,function(restxt) {if(Restxt== "OK") {                            $("#msg"). Text ("This user name is available"); }                        Else {                            varSTRs=Restxt.split ("|"); if(strs[0] == "Error") {                                $("#msg"). Text (strs[1]); }                        }                    },                    function(status) {alert ("Error");            });        });    }); </Script></Head><Body>fools only make our work simple, not let us become fools! <BR/>User name:<inputtype= "text"ID= "username" /><spanID= "MSG"></span></Body></HTML>

View Code

Ashx

 Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; //"OK", the user can use//"error| contains banned words", "error| user name has been used"            stringUsername = context. request["username"]; if(string. Isnullorwhitespace (username)) {context. Response.Write ("error| user name must be filled in"); return; }            if(username. length<3|| Username. Length>Ten) {context. Response.Write ("error| User name length must be between 3 and 10"); return; }             if(username. Contains ("Drugs") || Username. Contains ("Hand * Gun") {context. Response.Write ("error| contains prohibited terms"); return; }            intc = (int) Sqlhelper.executescalar ("Select COUNT (*) from t_users where [email protected]",                NewSqlParameter ("@UserName", username)); if(C >0) {context. Response.Write ("error| user name is already in use"); return; } context. Response.Write ("OK"); }

ashx

Getting Started with Ajax