Ajax知识点

一、Ajax概述

1．什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

2．Ajax的运行原理

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

3.json

json有两种格式：

1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}

2）数组/集合格式：[obj,obj,obj...]

4.Jquery的Ajax技术常用的有3种

1）$.get(url, [data], [callback], [type])

2）$.post(url, [data], [callback], [type])

3）$.ajax( { option1:value1,option2:value2... } );

示例如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    function myget() {
        $.get("${pageContext.request.contextPath }/AjaxServlet", {
            "name" : "张三"
        }, function(date) {//date={\"username\":\""+username+"\"}
            alert(date.username);
        }, "json");
    }
    function mypost() {
        $.post("${pageContext.request.contextPath }/AjaxServlet02", {
            "name" : "张三"
        }, function(date) {//date={\"username\":\""+username+"\"}
            alert(date.username);
        }, "json");
    }
    
    function myAjax() {
        $.ajax({
            url:"${pageContext.request.contextPath }/AjaxServlet03",
            data:{"username":"小红帽"},
            type:"post",
            success:function(date){
                alert(date.username);
            },
            async:true,
            dataType:"json"
        });
    }
</script>
</head>
<body>
    <input type="button" value="get异步请求" onclick="myget()">
    <input type="button" value="post异步请求" onclick="mypost()">
    <input type="button" value="AjaxPost异步请求" onclick="myAjax()">
</body>
</html>