Ajax快速入门

AJAX

1.概念

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

• 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
• 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2.为什么需要使用ajax

ajax主要是实现页面和web服务器之间数据的异步传输。

简单来说，不采用ajax的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。

a、采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新；b、并且发起请求后，用户还可以进行页面上的其他操作。这就是异步的方式。c、客户端和服务端间只传递需要的数据，效率高，用户体验性好。d、并且Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

提升用户的体验

3. 实现方式：

1. 原生的JS实现方式（了解）

//1.创建核心对象
		            var xmlhttp;
		            if (window.XMLHttpRequest)
		            {// code for IE7+, Firefox, Chrome, Opera, Safari
		                xmlhttp=new XMLHttpRequest();
		            }
		            else
		            {// code for IE6, IE5
		                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		            }
		
		            //2. 建立连接
		            /*
		                参数：
		                    1. 请求方式：GET、POST
		                        * get方式，请求参数在URL后边拼接。send方法为空参
		                        * post方式，请求参数在send方法中定义
		                    2. 请求的URL：
		                    3. 同步或异步请求：true（异步）或 false（同步）
		
		             */
		            xmlhttp.open("GET","ajaxServlet?username=tom",true);
		
		            //3.发送请求
					
		            xmlhttp.send();
					
		
		            //4.接受并处理来自服务器的响应结果
		            //获取方式 ：xmlhttp.responseText
		            //什么时候获取？当服务器响应成功后再获取
		
		            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
		            xmlhttp.onreadystatechange=function()
		            {
		                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
		                if (xmlhttp.readyState==4 && xmlhttp.status==200)
		                {
		                   //获取服务器的响应结果
		                    var responseText = xmlhttp.responseText;
		                    alert(responseText);
		                }
		            }
           

package com.qf.ajax;

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1,获取请求参数
        String username = request.getParameter("username");

        //处理的10秒
//        try {
//            Thread.sleep(10000);
//        } catch (InterruptedException e) {
//            e.printStackTrace();
//        }

        //2,处理请求
        System.out.println("username:"+username);

        //3,响应
        response.getWriter().write("hello,"+username);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

           

2. JQeury实现方式

1. $.ajax()

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

//使用$.ajax()发送异步请求
		            $.ajax({
		                url:"ajaxServlet" , // 请求路径
		                type:"POST" , //请求方式
		                //data: "username=jack&age=23",//请求参数
		                data:{"username":"jack","age":23},
/*
						
可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
						*/
                        dataType:"text"//设置接受到的响应数据的格式
		                success:function (data) {
		                    alert(data);
		                },//响应成功后的回调函数
		                error:function () {
		                    alert("出错啦...")
		                },//表示如果请求响应出现错误，会执行的回调函数

		                
		            });
           

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

• 语法：$.get(url, [data], [callback], [type])
• 参数：
• url：请求路径
• data：请求参数
• callback：回调函数

• type：响应结果的类型,可选。规定预期的服务器响应的数据类型。

  默认执行智能判断（xml、json、script 或 html）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //2,jquery第二种提交方式
          $.get(
              "ajaxServlet",
              {username:"woniu"},
              function(data){
                  alert(data);
              }
          );
        }
    </script>
</head>
<body>

<button onclick="fun();">发送异步请求</button><br/>
<input type="text" />



</body>
</html>
           

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

• 语法：$.post(url, [data], [callback], [type])
• 参数：
• url：请求路径
• data：请求参数
• callback：回调函数

• type：响应结果的类型,可选。规定预期的服务器响应的数据类型。

  默认执行智能判断（xml、json、script 或 html）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //2,jquery第二种提交方式
          $.post(
              "ajaxServlet",
              {username:"woniu"},
              function(data){
                  alert(data);
              }
          );
        }
    </script>
</head>
<body>

<button onclick="fun();">发送异步请求</button><br/>
<input type="text" />



</body>
</html>