AJAX

定义：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

日常中比较常见的就是我们在注册网站时，实时显示你填写的用户名是否可用，这里用到的就是AJAX

readyState代码：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

Status代码：200 ok

在readyState代码为4，Status代码为200时，才可以根据响应进行操作。

JS原生代码实现：

异步访问代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
    function check(){
        var xmlhttp = new XMLHttpRequest();//获取一个XMLHttpRequest对象，用来发送请求
        var text = document.getElementById("text").value;
        var result = document.getElementById("result");
        xmlhttp.onreadystatechange=function(){//在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
            if(xmlhttp.readyState==4 && xmlhttp.status==200){//响应就绪
                result.innerHTML=xmlhttp.responseText;//显示响应内容
            }
        }
        xmlhttp.open("GET","ajax?text="+text,true);//GET方式，请求地址，异步请求，可以连续发送请求而不必等待响应
        xmlhttp.send();//发送请求
    }
</script>
<title>Insert title here</title>
</head>
<body>
    <span id="result"></span>
    <input type="text" name="message" id="text" onKeyUp="check()">
</body>
</html>

注意：POST方式请求需要设置请求头：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+name);//请求参数

Servlet：

public class AJAXServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String text = request.getParameter("text");
        response.setContentType("text/html;charset=utf-8");
        try {
            Thread.sleep(5000);//线程等待，用来观察同步、异步访问的区别
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        if(text.equals("123")) {
            response.getWriter().print("你输入的是123");
        }else {
            response.getWriter().print("你输入的不是123");
        }
    }

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

同步与异步访问的区别：

异步访问可以不必等待服务端响应完成，连续发送请求，而同步访问则必须等待服务端响应完成才能发送下次请求，在上例代码中，Servlet的线程等待5秒，当同步访问时，输入框输内容，check()函数执行，但是此时没法继续输入内容，因为函数在等待服务端响应，5秒后响应完成，才能继续输入。

JSON：

JavaScript 对象表示法（JavaScript Object Notation）是一种存储数据的方式。

<script>
var obj = {"name":"god","hp":616};
document.write("这是一个JSON对象: "+obj);
</script>

JSON对象由名称/值对组成名称和值之间用冒号:隔开
名称必须用双引号" 包含起来
值可以是任意javascript数据类型，字符串，布尔，数字，数组甚至是对象
不同的名称/值对之间用逗号 , 隔开

JSON数组：

<script>
 
var heros=
[
    {"name":"盖伦","hp":616},
    {"name":"提莫","hp":313},
    {"name":"死哥","hp":432},
    {"name":"火女","hp":389}
]
 
document.write("JSON数组大小"+heros.length);
 
</script>

多类型值混合

 var multiple = {"name":"zero","address":{"Country":"china","Provence":"ShanDong"}};

jQuery AJAX：

利用jQuery可以大幅简化ajax代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        $("#name").keyup(function(){
            var page = "";
            var value = $(this).val();//输入框内容
                $.ajax({
                    url: page,//提交地址
                    type: get,//提交方式，不写默认get
                    async: true,//异步请求 false为同步 不写默认true
　　　　　　　　　　　　contentType: "application/x-www-form-urlencoded",//post请求时需要设置请求头
                    data:{"name":value},//json格式提交数据
　　　　　　　　　　　　dataType:"html",//返回值类型，可以是xml/html/script/json/text/jsonp
                    success: function(result){//请求成功回调函数，成功响应执行的代码 result就是response的内容
                        $("#checkResult").html(result);
                    }
　　　　　　　　　　　　error:function(){//请求失败时的回调函数
　　　　　　　　　　　　　　alert("请求失败");
　　　　　　　　　　　　}
                });
        });
    });
    $(function(){//get方式提交请求，post语法相同
        $("#name").keyup(function(){
            var page = "";
            var value = $(this).val();
                $get(
                    page,
                    {"name":value},
                    function(result){
                        $("#checkResult").html(result);
                    }
                );
        });
    });
//load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
    $(function(){//load实现ajax
           $("#name").keyup(function(){
             var value = $(this).val();
             var page = "/study/checkName.jsp?name="+value;
             $("#checkResult").load(page);
           });
    });
</script>
<title>无标题文档</title>
</head>

<body>
    <div id="checkResult"></div>
      输入账号 :<input id="name" type="text">
</body>
</html>

当要提交的内容很多时，用一个个的变量去接收非常繁琐，这里就要用到序列化serialize：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        $("input").keyup(function(){
            var data = $("#form").serialize();//序列化表单内所有提交数据
            var url = "http://how2j.cn/study/checkName.jsp";
            var link = url+"?"+data;
            $("a").html(link);//实时显示请求URL
            $("a").attr("href",link);//改变链接值
                $.get(
                    page,
                    data,
                    function(result){
                        $("#checkResult").html(result);
                    }
                );
        });
    });
</script>
<title>无标题文档</title>
</head>

<body>
    <div id="checkResult"></div>
    <div id="data"></div>
    <a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a>
    <form id="form">   
    输入账号 :<input id="name" type="text" name="name"> <br>
    输入年龄 :<input id="age" type="text" name="age"> <br>
    输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>  
    </form>
</body>
</html>

posted @ 2018-05-18 17:18 0==1&1==0 阅读(288) 评论(0) 编辑收藏举报

刷新页面返回顶部

Observer

AJAX

公告