Ajax基本使用get/post

• AJAX
• Asynchronous JavaScript And XML 的首字母缩写
• AJAX 并不是一种新的编程语言，而仅仅是一种技术方案，它可以创建更好、更快且交互性更强的 web 应用程序。
• 本质是在HTTP协议的基础上通过异步的方式与服务器进行通信
• 功能：
  可以不用跳转新界面, 就可以发送请求。
  可以直接和服务器进行交互。
• 同步和异步的概念解释
• 指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步
• 同步：一个做完才能做另外一个
• 异步：把一个任务交给其他人，自己做另外一个，两人一块做
• XMLHttpRequest
• 浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
• get请求使用步骤
• 1.创建请求对象（找个电话）
  new XMLHttpRequest()
  new ActiveXObject('Microsoft.XMLHTTP'); 支持IE5.6

var xhr;
 if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
}else {
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

• 2.设置请求方式、URL地址、同异步（输入电话号码）

// 参数1: 请求方式
// 参数2: 请求的url
// 参数3: 是否是异步
xhr.open('get', '01-ajax-base-server.php', true);

• 3.发送请求（拨出号码）

xhr.send();

• 4.监听服务器响应 (等待电话接通)

xhr.onreadystatechange = function () {  }
判断readyState
if (xhr.readyState == 4) {
判断状态码status
      var status = xhr.status;
      if (status >= 200 && status < 300 || status == 304) {
          执行第5步
        }
}

• readyState
  0：请求未初始化（还没有调用open()）
  1：请求已经建立，但是还没有发送（还没有调用send()）
  2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
  3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
  4：响应已完成；您可以获取并使用服务器的响应了
• 5.处理返回（响应）数据（你听到对方说话）

在第四步的函数中处理
xhr.responseText     获得字符串形式的响应数据。
xhr.responseXML    获得 XML 形式的响应数据。

• Ajax-get请求参数与缓存
• 如何把数据传送到服务器
  直接拼接到url地址后面即可
  url?name=sz&age=18

// 拿到本地需要传送的数据
var account = document.getElementById('account').value;
var pwd = document.getElementById('pwd').value;
 设置请求的目标url (输入电话号码)
                // 参数1: 请求方式
                // 参数2: 请求的url
                // 参数3: 是否是异步
xhr.open('get', '01-ajax-base-server.php?account=' + account + '&pwd=' + pwd, true);

• 注意:IE浏览器下的get请求缓存问题,如果发送的请求，是同一个URL地址,则浏览器会返回之前响应的缓存
• 原因:一个相同的URL地址，一般只有一个结果， 所以，第二次访问的时候， 如果URL字符串没有变化，IE浏览器则直接使用之前的结果
• 解决方案:生成随机数拼接到URL地址后面

 function getRandomStr() {
            return Math.random() + (new Date()).getTime();
        }
xhr.open('get', '01-ajax-base-server.php?account=' + account + '&pwd=' + pwd + '&random=' + getRandomStr(), true);

• post请求与get请求区别
• 第二步中，将open的请求参数改为post即可
• 第二步中，不能将参数放在URL后面。应该在第三步send方法中传递

xhr.send('name=sz&age=19');

• 注意：在第二步open之后，第三步send之前需要添加：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//Content-Type防止乱码

• 从发起请求到响应成功的完整写法示例：

/*js 内置的 http 请求对象  XMLHttpRequest*/
/*1.初始化这个内置对象*/
var xhr = new XMLHttpRequest();
/*2.请求报文*/
/*请求行*/
xhr.open('post','01.php');
/*请求头*/
//get  没有必要设置
//post 必须设置 Content-Type: application/x-www-form-urlencoded
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
/*请求主体*/
//get: xhr.send(null);
//post: xhr.send("数据");
xhr.send("name=xzz&age=10");/*发送请求*/
/*3.响应报文*/
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){/*通讯完全完成*/    
        if(xhr.status == 200){/*响应成功*/      
            document.querySelector('body').innerHTML = xhr.responseText;//渲染页面
        }
    }
}