【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）

个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
      【速成之路】SQLserver

• $.ajax()方法

  $.ajax()方法通过HTTP请求加载远程数据，该方法是jQuery底层的Ajax实现。$.ajax()方法返回其创建的 XMLHttpRequest 对象，大多数情况下无须直接操作，除非需要操作不常用的选项，以获得更多的灵活性。$.ajax()方法的调用格式如下所示：

$.ajax({
url:'请求地址',
type:'POST/GET',
data：{ //从客户端发送到服务器的值
数据1:值1，
数据2:值2，
},
dataType:'设置从服务器端返回数据的数据类型',
async:'true|false',
success:function(str){
//Ajax请求成功回调函数的相关操作语句
},
error:function(err){
//Ajax请求失败回调函数
}
});

  $.ajax()方法的常用参数说明如下：

(1) url：用于请求数据的地址，默认值是当前网页地址。

(2) type：说明当前Ajax向服务器端发送数据采用get方法还是post方法。get方法会将前端上传的数据直接与地址连接起来，能传输的数据最大为1024B，一般用于查询操作(不会威胁数据库数据)。get方法有缓存问题，会被浏览器缓存起来。post方法比较安全，一般用于新增、删除、修改等操作，传输数据的大小2MB。

(3) data：发送到服务器的数据。该数据将会自动转换为请求字符串格式。GET请求中数据将附加在URL后。如果为数组，jQuery将自动为不同值对应同一个名称。例如，
{foo:[ ‘bar1"，“bar2”]}转换为’foo=bar1&foo=bar2’。

(4)dataType：设置服务器返回数据的数据类型。如果不指定，jQuery将自动根据HTTP包的MIME信息来智能判断，随后服务器端返回的数据会根据这个值解析后，传递给回调函数。该属性的可用值包括以下几种。

• “xml”：返回XML文档，可用jQuery处理。
• “html”：返回纯文本HTML信息，包含的script标签会在插入DOM时执行。
• “script”: 返回纯文本 JavaScript 代码。
• “json”：返回JSON数据。
• “jsonp”：返回JSONP格式的数据。
• “text”：返回纯文本字符串。

(5) asyne：同步与异步标志，默认值是true(异步)。同步时会阻塞程序的运行，请求完成之后才能继续运行脚本代码，异步时请求的过程不会阻塞代码运行。

(6) success：请求成功后所调用的回调函数。该回调函数所带参数主要包括服务器返回数据和返回状态。

(7) error：请求失败后所调用的回调函数。该回调函数所带参数主要包括 XMLHttpRequest 对象错误信息、（可能）捕获的错误对象。

  例中jQuery使用$. ajax()方法调用服务器端的文本文件，其在浏览器中的运行结果如图所示。

【例1】

  服务器端文本文件server. txt的源代码如下所示：

服务器端文件内容，返回到客户端。

  例2使用$. ajax()方法实现上节例1中原生 JavaScript 的用户名验证的功能。读者应该重点理解$.ajax()方法的数据发送方式与服务器端返回数据的处理方法，并对$.ajax()方法的使用方法进行着重分析。服务器端程序仍使用上节例1的服务器端servlet程序AjaxServlet.java。
【例2】

   
   
    
    
	
    
 
    

     用户名：
         
          id="display">