Ajax学习

js原生发送请求

var http = new XMLHttpRequest();
GET 请求
http.open("GET","/kongjs.com?username=jieke",true);
http.send();
POST 请求
http.open("POST","/kongjs.com",true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.send("username=kong&password=pass");

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
setRequestHeader(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

<input type="text" name="username" id="username"/>
<div id="info" ></div>
<script type="text/javascript">
    document.getElementById('username').onblur = function (ev) {
        var value = this.value;
        var http = new XMLHttpRequest();
        http.onreadystatechange = function (ev1) {
            if (http.status==200 && http.readyState == 4){
                var resp = http.responseText;
                document.getElementById('info').innerHTML = resp;
            }
        };
        http.open("get","/ajax?username="+value,true);
        http.send();
    }
</script>

构造函数
XMLHttpRequest()
该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。
属性
此接口继承了 XMLHttpRequestEventTarget 和 EventTarget 的属性。
XMLHttpRequest.onreadystatechange
当 readyState 属性发生变化时，调用的 EventHandler。
XMLHttpRequest.readyState 只读
返回 一个无符号短整型（unsigned short）数字，代表请求的状态码。
XMLHttpRequest.response 只读
返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。
XMLHttpRequest.responseText 只读
返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
XMLHttpRequest.responseType
一个用于定义响应类型的枚举值（enumerated value）。
XMLHttpRequest.responseURL 只读
返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。
XMLHttpRequest.responseXML 只读
返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。
XMLHttpRequest.status 只读
返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
XMLHttpRequest.statusText 只读
返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，“200 OK”）。
注意：根据 HTTP/2 规范（8.1.2.4 Response Pseudo-Header Fields，响应伪标头字段），HTTP/2 没有定义任何用于携带 HTTP/1.1 状态行中包含的版本（version）或者原因短语（reason phrase）的方法。
XMLHttpRequest.timeout
一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
XMLHttpRequestEventTarget.ontimeout
当请求超时调用的 EventHandler。
XMLHttpRequest.upload 只读
XMLHttpRequestUpload，代表上传进度。
XMLHttpRequest.withCredentials
一个布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。

使用jquery

<script type="text/javascript">
    var fn =(function () {
        $('#username').blur(function () {
            var value = $(this).val();
            $.get('/ajax',{
                username:username
            },
                function (result) {
                    $('#info').text(result);
                }
            )
        })
    });
    $(fn)
</script>

jquery ajax函数

<script type="text/javascript">
    $(function () {
        $('#username').blur(
            function () {
                var value = $(this).val();
                $.ajax({
                    url:'/ajax',
                    data:{
                        username:username
                    },
                    type:'get',
                    success:function (data) {
                        $('#info').html(data).css('color','red');
                    },
                    error:function (data) {
                        alert("请求失败！")
                    }
                })
            }
        )
    })
</script>