ajax总结

各种西瓜

于 2017-03-11 23:03:26 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/qq_25235807/article/details/61439592

版权

同步交互：客户端提交请求，等待，在响应回到客户端之前无法进行其他操作。
异步交互：客户端将请求提交到AJAX引擎，由ajax引擎和服务器进行通信客户端可以进行其他操作。当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待。
ajax的优势：
通过异步模式，提升了用户体验。
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息

ajax的核心技术

W3C介绍

XMLHttpRequest

什么是XMLHttpRequest？
w3c给出了定义：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

属性：

readyState
每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。
responseText
目前为止为服务器接收到的响应体（不包括头部），如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。默认使用utf-8编码
responseXML
对请求的响应，解析为 XML 作为doument对象返回
status
返回http请求状态码

方法

abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回。如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 “\r\n” 隔开。
getResponseHeader()
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
open(method, url, async, username, password)
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。异步操作必须使Async=true 该参数规定请求是否异步处理。true 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应,如果服务器没有响应时我们可以将async设置为false这样可以省去额外的回调函数后两个参数可选，为 url 所需的授权提供认证资格。
setRequestHeader()
setRequestHeader() 方法指定了一个 HTTP 请求的头部，它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用调用了 open() 之后，但在调用 send() 之前。
设置post方式：

xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

send()
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。 GET方式请求直接在open（）方法的url中拼接参数，如果是POST请求方式需要设置请求头，在send方法中添加请求参数。
说明的是：这个方法导致一个 HTTP 请求发送。如果 readyState 不是 1，send() 抛出一个异常。否则，它发送一个 HTTP 请求，
该请求由以下几部分组成：
1. 之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格
2. 之前调用 setRequestHeader() 时指定的请求头部
  （post）
3. 传递给这个方法的 body 参数。
  send() 把 readyState 设置为 2，并触发 onreadystatechange 事件句柄。
  如果之前调用的 open() 参数 async 为 false，这个方法会阻塞并不会返回，直到 readyState 为 4 并且服务器的响应被完全接收。否则，如果 async 参数为 true，或者这个参数省略了，send() 立即返回，并且正如后面所介绍的，服务器响应将在一个后台线程中处理。
  如果服务器响应带有一个 HTTP 重定向，send() 方法或后台线程自动遵从重定向。当所有的 HTTP 响应头部已经接收，send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件句柄。如果响应较长，send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄：这可以作为一个下载进度指示器。最后，当响应完成，send() 或后台线程把 readyState 设置为 4，并最后一次触发事件句柄。
  - onreadystatechange
    回调事件，处理业务

示例
<%@ 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>
</head>
<script type="text/javascript">
    window.onload = function() {
        var name = document.getElementById('name');

        var xmlhttp = null;
        //给文本框注册失去焦点的事件
        name.onblur = function() {

            //1.创建XMLHttprequest对象
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
               //IE5 和IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp != null) {
                //2.注册回调函数
                xmlhttp.onreadystatechange = state_Change;
                //3.设置请求方式
                xmlhttp.open("POST", "${pageContext.request.contextPath}/ajax",
                        true);//请求servlet
                xmlhttp.setRequestHeader("content-type",
                        "application/x-www-form-urlencoded");
                //4.发送请求参数
                xmlhttp.send("username=" + name.value);
            }
            //在回调函数中实现业务逻辑
            function state_Change() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                   document.getElementById("s").innerHTML=xmlhttp.responseText;
                }

            }
        }
    }
</script>
<body>
    输入用户名<input type="text" name="username" id="name"><span id="s"></span><br> 
    输入用户密码<input type="password" name="password">

</body>
</html>