AJAX 详细解释

Ajax 概述

1.同步与异步

同步：客户端与服务器端的请求与响应是一个过程的，也就是说在过程完成前客户端都处于等待卡死状态
异步：客户端发送请求，无论服务器是否响应，客户端都可以随意做其他事情。

2.Ajax 的运行原理

页面发起请求，会将请求发送给浏览器内核中 Ajax 引擎，Ajax 引擎会提交请求到服务端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给 Ajax 引擎后，会触发你设置的事件，从而执行自定义的 js 逻辑代码完成某种页面功能。

js 原生的 ajax

js 原生的 Ajax 其实就是围绕浏览器内置的 Ajax 引擎对象进行开发的，要使用 js 原生的 Ajax 完成异步操作，需要如下步骤

创建 Ajax 引擎对象
为 Ajax 引擎对象绑定监听(监听服务器已将数据响应给引擎)
绑定提交地址
发送请求
接受响应数据

index.html


<!DOCTYPE HTML>
<html>
  <head>
    <title>index</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		function fn1(){
			// 1.创建ajax引擎对象 --- 所有的操作都是用过引擎对象
			var xmlHttp;
			// 老版本IE5、IE6使用ActiveXObject引擎
			if(window.XMLHttpRequest){ //判断浏览器是否支持此对象
				xmlHttp = new XMLHttpRequest();
			}else{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			// 2.绑定监听  --- 监听服务器是否已经返回相应数据
			xmlHttp.onreadystatechange = function(){ 
				if(xmlHttp.readyState==4&&xmlHttp.status==200){
					// 5.接收响应数据
					document.getElementById("span1").innerHTML = xmlHttp.responseText;
				}
			}
			// 3.绑定数据 - 参数1请求方式、参数2请求地址、参数3是否异步
			xmlHttp.open("post","AjaxServlet",true);
			// 4.发送请求
			xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlHttp.send("name=wangsiyuan");
		}
	</script>
  </head>
  <body>
    <input type="button" value="异步访问服务器" onclick="fn1()">
  	<span id="span1"></span>
  </body>
</html>

属性	描述
onreadystatechange	存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 的变化(0:请求未初始化 1:服务器连接已建立 2:请求已处理 3:请求处理中 4:请求已完成，且响应已就绪)
status	200:"OK" 404:"页面未找到" 500:"服务器错误"...

AjaxServlet.java


package top.code666.ajax01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String name = (String) request.getParameter("name");
		response.getWriter().write(Math.random()+name);
	}

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

运行结果:

JQuery 的 Ajax 技术(重点)

1.jQuery 的 get、post 方式

$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
url:代表请求的服务器地址
data:代表请求服务端的数据(可以是 key=value 形式也可以是 json 格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jQuery 会根据指定的类型自动类型转换)
常见的返回类型:text、json、html 等


// 这里只贴js代码
<script>
    function fn1(){
        // get异步访问
        $.get(
            "/project/ajaxProject", //url地址
            {"name":"zhangsan","age":22}, //发送给服务器的数据
            function(data){ //成功后的回调方法
                   alert(data);
            },
            "text" //返回类型
        );
    }

    function fn1(){
        // post异步访问
        $.post(
            "/project/ajaxProject", //url地址
            {"name":"zhangsan","age":22}, //发送给服务器的数据
            function(data){ //成功后的回调方法
                 //{\"name\":\"tom\",\"age\":21}
                   alert(data.name);
            },
            "json" //返回类型
        );
    }
</script>

注意：post 方法传输中文到服务端不用考虑乱码问题，get 方法需要考虑乱码问题

2.jQuery 的 ajax 方式

$.ajax({option1:value1,option2:value2...});
常用的 option 有如下:

async:是否异步，默认是 true 代表异步
data:发送到服务器的参数，建议使用 json 格式
dataType:服务器端返回的数据类型，常用的 text 和 json
success:成功响应执行的函数,对应的类型是 function 类型
type:请求方式，POST/GET
url:请求服务端地址


<script>
    function fn3(){
            $.ajax({
                url:"/project/ajaxProject",
                async:true,
                type:"POST",
                data:{"name":"tom","age":22},
                success:function(data){
                    alert(data.name);
                },
                error:function(){
                    alert("请求失败");
                },
                dataType:"json"
            });
        }
</script>

##附
####ajax 实现 loading 效果


// 提交表单数据到后台处理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按钮防止重复提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success") {
            //清空输入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

AJAX 详细解释

Ajax 概述

js 原生的 ajax

JQuery 的 Ajax 技术(重点)

1.jQuery 的 get、post 方式

2.jQuery 的 ajax 方式

相关帖子

今天做个简单的例子常见的前端 Ajax_Get/Post_Api 如何使用？（一）

ajax post

ajax 上传文件

Ajax 介绍和简单用法

求助前后端分离 ajax 跨域问题

ajax 手机端滑动分页

Django 中 ajax 上传图片详细步骤

欢迎来到这里！