利用jQuery Ajax loading图片

beforeSend:出现一些提示信息和loading图片。

complete：隐藏loading图片

dataType 预期服务器返回的数据类型 。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值: 
"xml": 返回 XML 文档，可用 jQuery 处理。
"html ": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 
"text": 返回纯文本字符串

 

1 、请求页面 AJax.aspx

HTML 代码

Java代码  

1. <div>  
2. <input id="txtName" type="text" />  
3. <input type="button" value="查看用户名是否存在" id="btn" οnclick="JudgeUserName();" />  
4. <div id="showResult" style="float: left"></div>  
5. </div>  

 

 

JS 代码

Java代码  

1. <script type="text/javascript">  
2. function JudgeUserName(){  
3.     $.ajax({  
4.         type:"GET",  
5.         url:"AjaxUserInfoModify.aspx",  
6.         dataType:"html",  
7.         //contentType:'application/x-www-form-urlencoded;charset=UTF-8',  
8.         data:"userName="+$("#txtName").val(),  
9.         beforeSend:function(XMLHttpRequest)  
10.         {  
11.             $("#showResult").text("正在查询");  
12.             //show loading images  
13.             //Pause(this,100000);  
14.         },  
15.         success:function(msg)  
16.         {  
17.             $("#showResult").html(msg);  
18.             $("#showResult").css("color","red");  
19.         },  
20.         complete:function(XMLHttpRequest,textStatus)  
21.         {  
22.             //隐藏正在查询图片  
23.         },  
24.         error:function()  
25.         {  
26.             //错误处理  
27.         }  
28.     });  
29. }  
30. </script>   

2 、页面 AjaxUserInfoModify.aspx

Java代码  

1. protected void Page_Load(object sender, EventArgs e)  
2.     {  
3.         string userName = Request.QueryString["userName"].ToString ();  
4.         if (userName == "James Hao")  
5.         {  
6.             Response.Write ("用户名已经存在！");  
7.         }  
8.         else  
9.         {  
10.             Response.Write ("您可以使用此用户名！");  
11.         }  
12. }   

 

3 、运行界面

(1)初始化界面

（2）正在查询提示页面

（3） 验证用户名已经存在页面

（4）  验证用户名未存在页面

至此 AJAX验证用户名是否存在的功能已经完成。