ajax异步请求（练习版）_异步请求练习-CSDN博客

1. ajax是什么?

asynchronous javascript and xml：异步的js和xml
它能使用js访问服务器，而且是异步访问
服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据
text：纯文本
xml：大家都熟悉
json：它是js提供的数据交互格式，它在ajax中最受欢迎

2. 异步交互和同步交互

同步：

发一个请求，就要等待服务器的响应结束，然后才能发第二个请求！中间这段时间就是一个字“卡”
刷新的是整个页面
异步：

发一个请求后，无需等待服务器的响应，然后就可以发第二个请求
可以使用js接收服务器的响应，然后使用js来局部刷新

3. ajax应用场景

百度的搜索框
用户注册时（校验用户名是否被注册过）

4. ajax的优缺点

优点：

异步交互：增强了用户的体验
性能：因为服务器无需再响应整个页面，只需要响应部份内容，所以服务器的压力减轻了

缺点：

ajax不能应用在所有场景
ajax无端的增多了对服务器的访问次数，给服务器带来了压力

5.创建一个ajax

使用jq创建一个异步请求，传输内容为json对象
记着导入jquery.js包
jquery手册$.post()的用法<----------------------点击跳转

1.写一个简单的首页index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Title</title>
  </head>
  <script src="./js/jquery.min.js"></script>
  <body>
    <div>
      姓名：<input name="username" type="text"/><br>
      <input type="button" id="aj"  value="AJ"><br>
      <p id="p1"></p>
    </div>
  </body>
  <script>
  //给按钮绑定点击事件
      $("#aj").click(function () {
     	 //"aj"请求的页面地址， "name=John&location=Boston" 传的参数
          $.post("aj", "name=John&location=Boston", function (res) {
          	//这个是数组与json混用时的遍历，在aj servelt页面有对应的String s
              /*for (var i = 0; i < res.length; i++) {
                  var s = res[i];
                  for (key in s) {
                      alert(s[key]);
                  }
              }*/
              for (key in res) {
                  alert(res[key]); //"name"
              }
              alert(res["name"]); //获取json数据res.name,res["name"]
          }, "json");
      });
  </script>
</html>

2.写一个简单的servlet

package classTest;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/aj")
public class aj extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String s1="{\"name\":\"吴1\",\"location\":\"流C\",\"age\":2}";
        String s = "[{\"name\":\"吴2\",\"location\":\"流C\",\"age\":3}," +
                "{\"name\":\"吴3\",\"location\":\"流B\",\"age\":1}," +
                "{\"name\":\"吴4\",\"location\":\"流C2\",\"age\":32}]";
        //设置响应的格式json，和字符编码utf-8
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(s1);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}