Ajax（详细介绍）

nine06

已于 2023-12-12 20:40:56 修改

阅读量1.7k

点赞数 18

文章标签： ajax 前端 javascript servlet java

于 2023-12-12 20:32:43 首次发布

本文链接：https://blog.youkuaiyun.com/nine06/article/details/134934307

版权

3.4、利用json-lib快速的将javabean转换为了为json数据

3.5、jQuery实现Ajax

一、Ajax的技术与原理

1.1、Ajax简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。

虽然 Ajax 中的 x 代表 XML，但是现在 JSON 的诸多优势 JSON 的使用比 XML 更加普遍。

JSON 和 XML 都用于在 Ajax 模型中封装数据。

1.2、同步交互和异步交互

同步

（1）发一个请求，就要等待服务器的响应结束，然后才能发第二个请求。
（2）刷新的是这个页面。

异步

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

1.3、Ajax语法介绍

学习使用Ajax主要就是学习XMLHttpRequest对象的方法和属性。

二、Ajax编程步骤

2.1、创建第一个Ajax

<script type="text/javascript">
		var xmlHttp;
		//1.创建XMLHttpRequest对象
		function test() {
			try { //Firefox, Opera 8.0+, Safari
				xmlHttp = new XMLHttpRequest();
			} catch (e) {
				try { //Internet Explorer
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
						alert("不支持Ajax！");
					}
				}
			}
			//2.建立与服务器的连接
			xmlHttp.open("GET","${pageContext.request.contextPath}/servlet/AjaxDemo1?time=" + new Date().getTime());
			//3.向服务器发送数据
			xmlHttp.send(null);
			//4.设置回调函数，接受服务器返回的数据
			//注意：readyState的状态变化都会触发onreadystatechange事件
			xmlHttp.onreadystatechange = showInfo;
		}

		function showInfo() {
			//alert(xmlHttp.readyState);
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200 || xmlHttp.status == 304) {//304表示服务器的内容没有变化
					document.getElementById("div1").innerHTML = xmlHttp.responseText;
				}
			}

		}
	</script>

2.2、传值

//get方式传值
			xmlHttp.open("get",
"${pageContext.request.contextPath}/servlet/TestServlet?name=haoren&password=123&time="+ new Date().getTime());	
			xmlHttp.send(null);



//post方式传值
			xmlHttp.open("post","${pageContext.request.contextPath}/servlet/TestServlet？time="+ new Date().getTime());	
/**post方式是通过send把参数发送给服务器端，所以一定要指定发的类型，
"content-type","application/x-www-form-urlencoded"为普通的表单类型，
表单默认就是这个类型**/
			xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
			xmlHttp.send("name=好人&password=123");

三、Json

3.1、Json简介

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 是轻量级的文本数据交换格式。

JSON 独立于语言。

JSON 具有自我描述性，更易理解。

3.2、Json语法介绍

window.onload = function(){
    // 定义一个JSON对象
    var json1 = {name:"haoren",password:123};
    // 定义一个包含多个JSON对象的数组
    var jsonArr = [{name:"huairen",age:12+23},{name:"zhangsan",age:23},{name:"lishi",age:13}]
    // 输出json1对象的name属性
    alert(json1.name);
    // 输出json1对象的password属性
    alert(json1.password);
    // 遍历jsonArr数组
    for(i=0;i<jsonArr.length;i++){
        // 输出数组中每个对象的name属性和age属性加上10的结果
        alert(jsonArr[i].name+","+(jsonArr[i].age+10));
    }
}

3.3、Json深入

Servlet：

@WebServlet("/AjaxController")
public class AjaxController extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        User user = new User(1,"张三","123",18);
        //手动拼接字符串
        resp.getWriter().print("{id:"+user.getId()+",name:'"+user.getName()+"',password:'"+user.getPassword()+"',age:"+user.getAge()+"}");
 }
}

Jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
    <script src="js/jquery-1.4.2.min.js"></script>
  </head>
  <body>
        <a href="#" onclick="test()">Ajax</a>
        <div id="div1"></div>
  </body>
  <script>
    var xmlHttp;
      function test() {
          try {
              xmlHttp = new XMLHttpRequest();
          } catch (e) {
              try {
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e) {
                  try {
                      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                      alert("不支持Ajax！");
                  }
              }
          }
          xmlHttp.open("get","${pageContext.request.contextPath}/AjaxController?time=" + new Date().getTime());
          xmlHttp.send(null);
          xmlHttp.onreadystatechange = showInfo;
      }
    function showInfo(){
        //alert(xmlHttp.readyState);
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200 || xmlHttp.status == 304){
                var jdata = eval("("+xmlHttp.responseText+")");
                alert(jdata.id+","+jdata.name+","+jdata.password+","+jdata.age);
            }
        }
    }

  </script>
</html>

效果图

3.4、利用json-lib快速的将javabean转换为了为json数据

Servlet：

@WebServlet("/AjaxController")
public class AjaxController extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        User user1 = new User(1,"张三","123",18);
        User user2 = new User(2,"李四","123",18);
        User user3 = new User(3,"王二","123",18);
        ArrayList<User> users = new ArrayList<>();
        Collections.addAll(users,user1,user2,user3);
        JSONArray jsonArray = JSONArray.fromObject(users);
        resp.getWriter().print(jsonArray.toString());

    }
}

Jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
    <script src="js/jquery-1.4.2.min.js"></script>
  </head>
  <body>
        <a href="#" onclick="test()">Ajax</a>
        <div id="div1"></div>
  </body>
  <script>
    var xmlHttp;
      function test() {
          try {
              xmlHttp = new XMLHttpRequest();
          } catch (e) {
              try {
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e) {
                  try {
                      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                      alert("不支持Ajax！");
                  }
              }
          }
          xmlHttp.open("get","${pageContext.request.contextPath}/AjaxController?time=" + new Date().getTime());
          xmlHttp.send(null);
          xmlHttp.onreadystatechange = showInfo;
      }

    function showInfo(){
        //alert(xmlHttp.readyState);
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200 || xmlHttp.status == 304){
                var jdata = eval("("+xmlHttp.responseText+")");
                for (var i = 0; i<jdata.length;i++){
                    alert(jdata[i].id+","+jdata[i].name+","+jdata[i].password+","+jdata[i].age);
                }
            }
        }
    }

  </script>
</html>

效果图：

3.5、jQuery实现Ajax

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。

load方法：（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式）

load(url,[data],[callback]);

url:请求的服务器的资源地址

data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据

callback:function(data,textStatus,xhr){}

data:服务器端返回的数据

textStatus:状态。succuss, error, notmodify, timeout

xhr：XmlHttpRequest对象本身

Servlet：

@WebServlet("/AjaxController2")
public class AjaxController2 extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        User user = new User(1,"zs","123",18);
        String data = "{id:"+user.getId()+",name:'"+user.getName()+"',password:'"+user.getPassword()+"',age:"+user.getAge()+"}";
        resp.getWriter().print(data);

    }
}

Jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
    <%--<script src="js/jquery-1.4.2.min.js"></script>--%>
        <%--<script src="js/jquery-1.8.3.min.js"></script>--%>
        <script src="js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
        <a href="#" onclick="test()">Ajax</a>
        <div id="div1"></div>
  </body>
  <script>
    function test(){
        $("#div1").load("${pageContext.request.contextPath}/AjaxController2",function (data,testStatus,xhr) {
            $("#div1").innerHTML = data;
        });
    }
  </script>
</html>

效果图：