JavaWeb：Ajax

AJAX

1.概念

• 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
  异步和同步：客户端和服务器端相互通信的基础上

  • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

  • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

  Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
  这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

Ajax作用：提升用户的体验

什么是同步和异步？

• 同步：发送一个请求，在还没有从服务器端得到响应数据的这个时间段，不可以在页面进行任何操作。
• 异步：发送一个请求，在还没有从服务器端得到响应数据的这个时间段，还可以在页面进行操作。

---

2.实现方式

1. 原生的JS实现方式

1. 创建核心对象

下面代码解释：通过window.XMLHttpRequest判断请求的浏览器是哪个，通过不同浏览器创建不同对象，以适应兼容性。

2. 建立连接

   xmlhttp.open(“GET”,“ajaxServlet?username=tom”,true);
   参数：

   1. 请求方式：GET、POST

      get方式，请求参数在URL后边拼接。send方法为空参
      post方式，请求参数在send方法中定义

   2. 请求的URL：

   3. 同步或异步请求：true（异步）或 false（同步）

3. 发送请求
   xmlhttp.send(); （这是get的发送请求方式）
   xmlhttp.send(参数); （这是post的发送请求方式）

4. 接受并处理来自服务器的响应结果
   获取方式 ：xmlhttp.responseText
   

---

2. JQeury实现方式（重点）

1. $.ajax()

语法：$.ajax({键值对});

使用$.ajax()发送异步请求

2. $.get()：发送get请求

语法：$.get(url, [data], [callback], [type])

参数：

• url：请求路径
• data：请求参数
• callback：回调函数
• type：响应结果的类型
  

3. $.post()：发送post请求

语法：$.post(url, [data], [callback], [type])

参数：

• url：请求路径
• data：请求参数
• callback：回调函数
• type：响应结果的类型
  

---

3.前后端数据交互

第一种

• Ajax发送请求到Servlet资源，发送请求中携带数据参数
• 后端servlet，通过request.getParameter获取数据。
  
  

第二种

• 通过form表单的action来将表单的数据请求给servlet资源
• 后端通过servlet拿参数值。
  
  

---

4.Json

做下面案例前请先学会Json
链接：https://blog.csdn.net/qq_44785877/article/details/113952463

---

5.案例：校验用户名是否存在

校验用户名是否存在

1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。

   有两种解决方案：
   1. $.get(type):将最后一个参数type指定为"json"
   2. 在服务器端设置MIME类型
   response.setContentType(“application/json;charset=utf-8”);