一、概述

• ajax不是一门编程语言，是一门技术

• ajax可以在页面加载完毕后从服务器读取数据

• 可以在不重新加载页面的情况下接受服务端的数据

• 可以在后台上传数据给服务器

• ajax使用了浏览器内建对象XMLHttpRequest和DOM操作

• 异步地从服务器读取数据，只用更新一部分数据

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

二、工作流程 pic_ajax.gif

1.在页面绑定时间（一个点击时间或者其他事件）
2.Javascript创建一个XMLHttpRequest对象并且向服务器发起请求
3.服务器处理请求
4.服务器向网页返回响应
5.JavaScript读取响应
6.更新页面信息

三、XMLHttpRequest对象

• 基本所有浏览器都有这个内建对象

对象的方法

-new XMLHttpRequest() 新建对象

• abort() 取消当前请求
• getAllResponseHeaders() 返回头部信息
• getResponseHeader() 返回特定的头部信息
• open(method, url, async, user, psw) 指定特定请求
• send(string) 使用POST请求向服务器发起请求
• setRequestHeader() 设置头信息

状态码

status_code.jpg

四、Ajax请求

• 使用open()和send()方法发送请求

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

• 以上代码的三个参数分别代表请求类型，文件的地址，和是否同步bool
• ajax传输数据有三种类型，分别为XML，HTML，JSON，其中json格式使用最多

五、JQuery操作Ajax

• 贴一段代码

    $(function () {
        $('#btn').on('click',function () {
            $.getJSON('helloajax.json',function (data) {
                var name = data.person.name;
                var age = data.person.age;
                 $('div').append(name)
            })
        })

    })