Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

一张宣纸

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/qq_34066464/article/details/88974188

版权

1.什么是ajax技术
一项可以发送异步请求，对页面进行局部更新的技术。
同步请求：发送一个请求，需要等待响应返回，然后才能发送下一个请求。如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。
异步请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求。
2.原生的Ajax
开发步骤：
1.创建Ajax引擎对象-XMLHttpRequest对象；
2.为XmlHttpRequest对象绑定监听；
3.绑定提交地址；
4.发送请求；
5.接受响应数据

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
  </head>
  <body>
        <button id="btn" "sendAjax();">点击后，发送Ajax请求</button>
  </body>
<script>
    function sendAjax() {
        //js原生的Ajax实现

        //1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

        //2.给XMLHttpRequest对象绑定监听
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                //5.接收响应
                alert(xhr.responseText);
            }
        }
        //3.绑定提交地址
        /**
         * GET:请求方式；
         * url：请求地址
         * flag： true--异步请求，false--同步请求
         */
        xhr.open("GET", "/ajaxServlet", true);
        //4.发送请求
        xhr.send();
    }
</script>
</html>

4.ajax的ready状态

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义

0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束

5.jquery的Ajax
在使用之前一定要引入jquery类库
1.GET请求的语法格式
$.get(url,[data],[callback],[type]);
url:请求地址
data:请求参数，格式一：key=value&key=value;格式二:{key:value,key:value}，格式一整体要加双引号，格式二的key一定要加双引号
callback:回调函数，请求成功后出发
type:返回参数类型

$.get("/getDemo",{"name":"张三","age":18},function (res) {
            //处理响应数据
            alert(res);
        },"text");

2.post请求只要把上面的get改成post就可以
3.ajax请求
$.ajax([settings]),settings的格式是{name:value,name:value…}
常用name属性名有
url:请求的服务器端url地址
async:默认是true，表示异步请求，如果要发送同步请求，必须设置为false
data:请求参数
type:请求方式，默认是GET
dataType:预期的返回数据类型
success:请求成功后的回调函数
error:请求失败时调用此函数

$.ajax({
	url: "/ajaxDemo",
	data: {"name":"张三","age":18},
	async: true,
	type: "GET",
	dataType: "text",
	success(result){
		代码
	},
	error(result){
		代码
	}
});