Ajax

最新推荐文章于 2024-09-27 09:39:47 发布

LuckyDeLee

最新推荐文章于 2024-09-27 09:39:47 发布

阅读量331

点赞数

分类专栏：前端文章标签： ajax 前端

本文链接：https://blog.csdn.net/qq_29747683/article/details/78108311

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介

AJAX(Asynchronous Javascript And XML，异步JavaScript和XML)，是一种用于创建快速动态网页的技术。从名字可以发现，Ajax并不是一种全新的技术，而是整合了JavaScript和XML的现有技术。

Ajax的作用

Ajax通过在后台与服务器之间交换少量数据的方式，实现网页的异步更新，意味着可以在不重新加载整个网页的情况下，对网页的局部内容进行更新。而传统的网页（不使用Ajax）如果需要更新内容，就必须重新加载整个网页。

使用JavaScript实现Ajax

使用JavaScript来实现Ajax，主要借助XMLHttpRequest对象向服务器发送请求，并获取返回值。

XMLHttpRequest对象的常见方法

（1）open(methodName,URL,isAsync)
与服务器连接简历，methodName指定请求的方法名,URL指定请求地址：isAsync是一个boolean值，代表是否采用异步方式（默认true，若无特殊情况，此值一般都填true）。
（2）send(content)
发送HTTP请求，content时可选项，用来指定请求参数，将请求参数作为请求体的一部分一起发送给服务器。通常只在POST方式下才使用content参数（Get请求方式不携带与请求体）
（3）setRequestHeader(header,value)
在HTTP请求头中设置key/value对：
①若为GET请求方式：则不用设置；
②若为POST方式，
a.当请求中包含文件上传元素时，设置为：
XMLHttpRequest.setRequestHeader(“Content-Type”, “mulipart/form-data”);
b.当请求中不包含文件上传元素时，设置为：
XMLHttpRequest.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

XMLHttpRequest对象的常用属性

（1）readystate
readystate表示XMLHttpRequest对象发送的HTTP请求状态

状态值	简介
0	表示XMLHttpRequest对象没有初始化
1	表示XMLHttpRequest对象开始发送请求，已经执行了open()方法并完成了相关资源的准备
2	表示XMLHttpRequest对象已将请求发送完毕，已经执行了send()方法来发送请求，但是还没有收到响应
3	表示XMLHttpRequest对象开始读取响应信息，已经接收到HTTP响应的头部信息，但是还没有将响应体接收完毕
4	表示XMLHttpRequest对象将响应信息全部读取完毕

（2）status
status表示HTTP响应中的状态码，

状态码	含义
200	服务器正常响应
400	无法找到请求的资源
403	没有访问权限
404	访问资源不存在
500	服务器内部错误，很可能是服务器代码有错

（3）onreadystatechange
指定XMLHttpRequest对象的回调函数，每当readyState的属性值改变时，此回调函数就会被调用一次。
（4）responseText
从服务器端返回的string格式的响应内容
（5）responseXML
从服务器端返回的XML格式的数据，可以直接被当做DOM对象使用

使用Ajax实现异步请求

使用JavaScript实现Ajax，分为post和get两种方式，
（1）创建XMLHttpRequest对象，即创建一个异步调用对象
（2）设置并编写回调函数
（3）初始化XMLHttpRequest对象的参数值（若是post方式，还需设置“请求头”）
（4）发送HTTP请求
（1）采用POST方式
服务器端MobileServlet.java

public class MobileServelt extends HttpServlet {
  protected void doGet(...){
   this.doPost(request,reponse);
  }
 }
 protected void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOExceptionP{
//设置发送到客户端响应的内容类型
   response.setContentType("text/html;charset=utf-8");
   PrintWriter out = response.getWriter();
   String mobile = request.getParameter("mobile");
   //假设存在电话为1888
   if("1888".equals(mobile)) {
     out.print("true");
   } else {
     out.print("false");
    }
    out.close();
 }
}

客户端index.jsp

<head>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">

function isExist() {
  var $mobile = $("#mobile").val();
  if($mobile == null || ￥mobile.length != 4) {
    $("#tip").html("请输入正确的手机号码！");
  } else {
    //1.创建XMLHttpRequest对象
    xmlHttpRequest = new XMLHttpRequest();
    //2.设置回调函数（ps:回调函数的名字后面没有小括号）
    xmlHttpRequest.onreadystatechange = callBack;
    //3.初始化XMLHttpRequest对象的参数值及请求头
    var url = "MobileServelt";
    xmlHttpRequest.open("post",url,true);
    //post方式需要设置请求头
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     //4.发送HTTP请求
     var data = "mobile="+ $mobile;
     xmlHttpRequest.send(data);
   }
}
//Ajax回调函数
function callBack() {
   if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
    //获取异步调用返回的数据
   var data = xmlHttpRequest.responseText;
    //使用JavaScript或Jquery等实现局部刷新
   if ($.trim(data) == "true") 
   {
    $("#tip").html("此号码已经被绑定，请尝试其他号码!");
   } else {
    $("#tip").html("绑定成功!");
   }
  }
 }</script>
</head>
<body>
 <form action="">
  <input type="text" id="mobile" />
 <font color="red" id="tip"></font>
  <br /> 
<input type="button" value="绑定" onclick="isExist()" />
 </form>
</body>

服务器端是通过PrintWriter对象out，将结果以字符串的形式，传递给客户端；而客户端通过XMLHttpRequest对象的responseText属性，来获取该结果；此外，客户端中responseText属性的返回值是string类型，所以在服务器端也应该传递String类型的结果。
（2）采用get方式
上例改成get方式的Ajax
（1）将XMLHttpRequest对象的open（）方法中的method参数值改为“get”;
（2）给XMLHttpRequest对象的send方法中的url参数，加上需要传递的参数值（即把url的值，从“请求地址”改为“请求地址？参数名1=参数值1&参数名2=参数2&…”）
（3）删除设置XMLHttpRequest对象头信息的代码
（4）将XMLHttpRequest对象的send（data）方法中的data，改为null（即将data的值，转移到了send（）方法的url参数中）

将post方式改为get方式后，把需要发送的参数从send（）方法转移到open的url参数中，并且不需要再设置头信息。
客户端index_get.jsp与POST方式的不同之处如下：

<head>
…
 function isExist() 
 {
   var url = "MobileServlet";
   var data = "mobile=" + $mobile;
   xmlHttpRequest.open("get", url+"?"+data, true);
   //xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xmlHttpRequest.send(null);  
 }
 …
 </script>
</head>

使用JQuery实现Ajax

主要由jQuery提供的 $.ajax()、$ .get()、$.post()、load()等方法来实现。

$.ajax() {
   url:请求路径
   type:请求方式
   data:请求数据
    、、、，
    success:function(result,textStatus) {
   请求成功后执行的函数体
    }，
    error:function(xhr,errorMessage e) {
    请求失败后执行的函数体
    }，
       dataType:预期服务器返回的数据类型
}

基本格式是：所有参数写在$.ajax({…})中，不同参数之间用逗号隔开，每个参数以“参数名：参数值”的方式书写。

本质就是将JavaScript中XMLHttpRequest的属性和方法

参数	简介
String url	发送请求的地址，默认为当前页面地址
String type	请求方式（Post或get），默认为get
number timeout	设置请求超时的时间（单位是毫秒）
String data或Object data	发送到服务器的数据。若是Get方式的请求，data值将以地址重写的方式附加到url后面，若是post的方式，data值将作为请求体的一部分。
String dataType	预期服务器返回的数据类型，可用类型有XML、HTML、JSON、Text等，如果不指定。jQuery将自动根据HTTP中的MIME信息返回responseXML或responseText
function success(Object result,String textStatus)	请求成功后调用的函数 result：可选项，由服务器返回的数据 textStatus：可选项，描述请求类型
function error(XMLHttpRequest xhr,String errorMessage, Exception e)	请求失败后调用的函数 xhr：可选项，XMLHttpRequest对象 errorMessage：可选项，错误信息 e：可选项，引发的异常对象

参考：http://www.w3school.com.cn/jquery/ajax_ajax.asp

现在用jQuery提供的$.ajax()方法，来实现“检测手机号码是否已绑定”的客户端函数
客户端jQuery_ajax.jsp

$.ajax()

<script type="text/javascript">
 function isExist() 
 {
  var $mobile = $("#mobile").val();
  if ($mobile == null || $mobile.length != 11) 
  {
   $("#tip").html("请输入正确的手机号码！");
  } else 
  {
   $.ajax({
    url:"MobileServlet",
    type:"get" ,
    data:"mobile=" + $mobile,
    success:function(result)
{ 
     if ($.trim(result) == "true") 
     {
      $("#tip").html("此号码已经被绑定，请尝试其他号码!");
     } else {
      $("#tip").html("绑定成功!");
     }
     },
     error:function(){
     $("#tip").html("检测失败!");
     }
   });
  }
 }
</script>

$.get()方法

$.get()方法指定以get方式发生请求，与$ .ajax()方法在语法上的区别是：（1）参数值必须按照一定的顺序书写；（2）省略了参数名、type参数，以及error（）函数：（3） $.ajax()的各个参数是用大括号{}括起来的，而$ .get()没有大括号
语法：

$.get(
 请求路径，
   function(result,textStatus,xhr) {
    请求成功后执行的函数体
  }，
   预期服务器返回的数据类型
)

对比

$.ajax({
  url:请求路径 ,
  data:请求数据,
         type: "GET" ,
  success:function(result, textStatus)
{ 
   请求成功后执行的函数体
  },
  error:function(xhr,errorMessage,e)
{
   请求失败后执行的函数体
  },
        dataType:预期服务器返回的数据类型
 });

$.post()方法

$.post()方法指定以post方式发送请求。也是将参数值按照一定的顺序书写

$.post(
请求路径 ,
  请求数据,
         function(result, textStatus,xhr)
{ 
   请求成功后执行的函数体
  },
        预期服务器返回的数据类型
 );

$(selector).load()方法

$(selector).load()方法是在$ .get()(或 $.post())方法的基础上进一步的优化，不但会发生请求，还会将响应的数据放入指定的元素，其中$ (selector)是指JQuery选择器指定的元素。
语法：

$(selector).load(
请求路径 ,
  请求数据,
         function(result, textStatus,xhr)
{ 
   请求成功后执行的函数体
  },
        预期服务器返回的数据类型
 );

因为load（）方法会直接将响应结果放入指定元素，所以通常可以省略load（）中的function（）函数。
MobileLoadServlet.java

//省略import
public class MobileLoadServlet extends HttpServlet 
{
 protected void doGet(…)…
{
  this.doPost(request, response);
 }
 protected void doPost(HttpServletRequest request, 
HttpServletResponse response) 
throws ServletException, IOException 
{
  //设置发送到客户端的响应的内容类型
  response.setContentType("text/html;charset=UTF-8"); 
  PrintWriter out = response.getWriter();
  String mobile = request.getParameter("mobile");
  //假设已经存在号码为18888888888的电话
  if("1888".equals(mobile))
{
   out.print("此号码已经被绑定，请尝试其他号码!");
  }else
{
   out.print("绑定成功!");
  }
  out.close();
 }
}

客户端用load（）方法时，服务器端直接将结果字符串返回。
客户端jQuery_load.jsp

<script type="text/javascript">
 function isExist() {
   var $mobile = $("#mobile").val();
   if($mobile == null || $mobile.length != 11) {
     $("#tip").html("请输入正确的手机号码");
    } else {
      $("#tip").load(
       "MobileLoadServlet",
       "mobile="+$mobile
       );
    }
 }
 </script>
…
<body>
 <body>
  <form action="">
   <input type="text" id="mobile" /> 
<font color="red" id="tip"></font>
   <br />
 <input type="button" value="绑定" onclick="isExist()" />
  </form>
</body>