Ajax implementation using jquery to verify that the user name exists

There are many ways to implement asynchronous refreshes, or you can use the various frameworks of JS, the following is the AJAX framework to implement the authentication of the user name exists

Jquery.ajax Overview

HTTP requests to load remote data.

Implemented through jquery's underlying AJAX. Easy to use high-level implementation see $.get, $.post and so on. $.ajax () returns the XMLHttpRequest object that it created. In most cases you do not need to manipulate the object directly, but in special cases you can use it to terminate the request manually.

$.ajax () has only one parameter: The parameter Key/value object, which contains the configuration and callback function information. Detailed parameter options are shown below.

Note: If you specify the DataType option, make sure that the server returns the correct MIME information (such as XML returns "Text/xml"). The wrong MIME type can cause unpredictable errors. See Specifying the Data Type for AJAX requests.

Note: If datatype is set to "script", all post requests will be converted to get requests when the remote request is not in the same domain. (because the script tag of the DOM will be used to load)

In JQuery 1.2, you can load JSON data across domains and set the data type to JSONP when used. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? is the correct function name to execute the callback function. When the data type is set to "Jsonp", JQuery automatically calls the callback function.

Parameter list:

Name of parameter	Type	Describe
URL	String	(Default: Current page address) sends the requested address.
type	String	(Default: "Get") The Request method ("POST" or "get"), the default is "get". Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but only some browsers support it.
Timeout	Number	Sets the request time-out (in milliseconds). This setting overrides the global settings.
Async	Boolean	(default: TRUE) by default, all requests are asynchronous requests. If you need to send a synchronization request, set this option to false. Note that the sync request will lock the browser, and the user's other actions must wait for the request to complete before it can be executed.
Beforesend	Function	You can modify the functions of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header. The XMLHttpRequest object is the only parameter. function (XMLHttpRequest) { This The options for this AJAX request }
Cache	Boolean	(default: TRUE) JQuery 1.2 new feature, set to False will not load the request information from the browser cache.
Complete	Function	The callback function after the request completes (called when the request succeeds or fails). Parameters: XMLHttpRequest Object, Success information string. function (XMLHttpRequest, textstatus) { This The options for this AJAX request }
ContentType	String	(Default: "application/x-www-form-urlencoded") the content encoding type when sending information to the server. The default values are suitable for most applications.
data	Object, String	Data sent to the server. is automatically converted to the request string format. get  request will be appended after url . View the  processData  option description to disable this automatic conversion. Must be a key/value  format. If the array,jquery  will automatically correspond to the same name for different values. such as {foo:["bar1", "Bar2"]}  converted to   ' &foo=bar1&foo=bar2 '.
DataType	String	expects the data type returned by the server. If you do not specify,jquery  will automatically return  responseXML  or  responsetext based on the  HTTP  package mime  information and pass as a callback function parameter. Available values: "xml":  returns  XML  documents, available  jQuery  processed. The "HTML":  returns plain text  HTML  information, including  script  elements. The "script":  returns plain text  JavaScript  code. Results are not automatically cached. "JSON":  returns  JSON  data  . The "JSONP": jsonp  format. When you use the  JSONP  form to invoke a function, such as   "myurl?callback=?" jquery  will automatically replace  ?  with the correct function name to execute the callback function.
Error	Function	(Default: This method is called when a request for automatic judgment (XML or HTML) fails.) This method has three parameters: the XMLHttpRequest object, the error message, and (possibly) the error object being captured. function (XMLHttpRequest, textstatus, Errorthrown) { Typically, Textstatus and Errorthown have only one of the values This The options for this AJAX request }
Global	Boolean	(default: TRUE) whether to trigger global AJAX events. Setting to FALSE will not trigger global AJAX events, such as Ajaxstart or Ajaxstop. Can be used to control different AJAX events
Ifmodified	Boolean	(default: false) to get new data only when the server data changes. Use the HTTP packet last-modified header information to determine.
ProcessData	Boolean	(default: TRUE) by default, the sent data is converted to an object (technically not a string) to match the default content type "application/x-www-form-urlencoded". Set to False if you want to send DOM tree information or other information that you do not want to convert.
Success	Function	The callback function after the request succeeds. This method has two parameters: the server returns data, returns the status function (data, textstatus) { Data could be xmldoc, jsonobj, HTML, text, etc ... This The options for this AJAX request }

Here are a few Ajax event parameters:beforesend ,success , complete, error. We can define these events to handle each of our AJAX requests well. Note that the this in these AJAX events is the option information that points to the Ajax request (refer to the picture of this for the Get () method).
Please read the above parameter list carefully, if you want to use jquery for Ajax development, then these parameters you must be familiar with.

Instance:

1. Request Page Ajax.aspx

HTML code

<div>
<input id= "txtname" type= "text"/><input type= "button" value= "to see if the user name exists" id= "btn" onclick= "Judgeusername ();" />
<div id= "Showresult" style= "Float:left" >div>
Div>

JS Code

<script type= "Text/javascript" src= "Css/jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
function Judgeusername ()
{
$.ajax ({
Type: "GET",
URL: "Ajaxuserinfomodify.aspx",
DataType: "HTML",
Data: "Username=" +$ ("#txtName"). Val (),
Beforesend:function (XMLHttpRequest)
{
$ ("#showResult"). Text ("querying");
Pause (this,100000);
},
Success:function (msg)
{
$ ("#showResult"). HTML (msg);
$ ("#showResult"). CSS ("Color", "red");
},
Complete:function (Xmlhttprequest,textstatus)
{
Hide a picture being queried
},
Error:function ()
{
Error handling
}
});
}

</script>

2. Page ajaxuserinfomodify.aspx

Background code

protected void Page_Load (object sender, EventArgs e)
{
String userName = request.querystring["UserName"]. ToString ();
if (UserName = = "James Hao")
{
Response.Write ("User name already exists!") ");
}
Else
{
Response.Write ("You can use this user name!") ");
}
}

3. Operating interface

(1) Initialize the interface

(2) Querying the prompt page

(3) Verify that the user name already exists on the page

(4) Verify that the user name does not exist on the page

The ability of Ajax to verify that the user name exists is complete.

Ajax implementation using jquery to verify that the user name exists