Ajax——异步基础知识（一）

基础概念

1、异步请求可以做到偷偷向服务器发送请求，而页面却不刷新

2、get异步请求传递参数是通过url追加键值对的方式

3、post异步请求比较特殊，需要设置请求的类型

User-Agent：浏览器的具体类型　　如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/ Firefox/17.0

Accept：浏览器支持哪些数据类型　　如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;

Accept-Charset：浏览器采用的是哪种编码　　如：Accept-Charset: ISO--

Accept-Encoding：浏览器支持解码的数据压缩格式　　如：Accept-Encoding: gzip, deflate

Accept-Language：浏览器的语言环境　　如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com

Connection：表示是否需要持久连接。Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive

Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。

Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset='gb2312'

Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip

Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。

Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。

Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/

readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化

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

status：200: "OK"；404: 未找到页面

get异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>发送异步请求</button>
<br>
<input type="text">
<script>
    var btn = document.getElementsByTagName("button")[0];
    var inp = document.getElementsByTagName("input")[0];
    btn.onclick = function () {
        var ajax = new XMLHttpRequest();//创建异步对象
        ajax.open('get', '01.php');//请求方法，参数1请求类型，参数2请求地址
        ajax.send();//发送请求
        //注册事件，有数据返回才会触发事件
        ajax.onreadystatechange = function (ev) {
            if (ajax.readyState == 4 && ajax.status == 200) {
                inp.value = ajax.responseText;
            } else {
                console.log("失败");
            }
        }
    }
</script>
</body>
</html>

post异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>发送异步请求</button>
<br>
<input type="text">
<input type="text">
<script>
    var btn = document.getElementsByTagName("button")[0];
    var inp1 = document.getElementsByTagName("input")[0];
    var inp2 = document.getElementsByTagName("input")[1];
    btn.onclick = function () {
        var ajax = new XMLHttpRequest();
        ajax.open('post', '02.php');
        //如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send('name=jack&age=13');//发送参数
        ajax.onreadystatechange = function (ev) {
            if (ajax.readyState == 4 && ajax.status == 200) {
                var msg = ajax.responseText;
                var arr=msg.split('|');//分割字符串
                inp1.value = arr[0];
                inp2.value = arr[1];
            }
        }
    }
</script>
</body>
</html>