【web】【ajax】

认识AJAX
JSON对象
下载数据，解析数据

【注】今天所有的代码都必须在服务器环境下。

一、认识AJAX

• Ajax (Asynchronous JavaScript and XML):异步的javascript和数据传输

• 节省用户操作，时间，提高用户体验，减少数据请求 传输获取数据
  ● 使⽤Ajax 使⽤ajax获取某⼀⽂本⽂件的内容
  ● Ajax过程详解 创建对象XMLHttpRequest()
  ActiveXObject(‘Microsoft.XMLHTTP’)

• 服务器
  什么是服务器：咱们的页面来源于服务器；实例（在phpnow/htdocs上面存放一个页面），
  咱们把页面放在互联网的服务器上，就有了自己的网站了。

二、同步异步

• JavaScript中同步：你不执行完上面的代码，那么下面的代码你就别执行；一步一步执行，这就是同步。
• 异步就是可以一块执行的代码；

进程的概念

• 进程≠程序
• 程序从开始到结束的一次执行过程叫做进程
• 一个进程当中，程序同时运行的多个分支，叫做线程
• 多线程异步执行，可以提高程序的效率

【注】任何一个程序都是由很多个小程序组成的。
【注】用来描述一个程序运行状态。
同步 阻塞，当前程序运行，必须等前一个程序运行完毕以后，才能运行。
异步 非阻塞，当前程序运行，和前面程序的运行没有任何关系。

AJAX的重要性

在许多数企业看来AJAX的使用熟练程度 === 你的工作经验

• xml数据传输格式（大型的门户网站 新浪、网易、凤凰网）
  优点：
  1、种类丰富
  2、传输量非常大
  缺点：
  1、解析麻烦
  2、不太适合轻量级数据

• json数据传输格式(字符串) 95%移动端应用。
  优点：
  1、轻量级数据
  2、解析比较轻松
  缺点：
  1、数据种类比较少
  2、传输数据量比较小

• 解析为对象 JSON.parse()

• 转字符串对象 JSON.stringify()

window.onload = function(){
   var oBtn = document.getElementById("btn1");
   oBtn.onclick = function(){

       //1、创建ajax对象
       var xhr = new XMLHttpRequest();

       //2、调用open
       /* 
           第一个参数： 请求方式  get post
           第二个参数：url
           第三个参数： 是否异步  
                true 异步
                false同步
        */
       xhr.open("get", "1.txt", true);

       //3、调用send
       xhr.send();

       //4、等待数据响应
       xhr.onreadystatechange = function(){
           if(xhr.readyState == 4){
               alert(xhr.responseText);
           }
       }

   }
}

三、AJAX异步加载数据

3.1 AJAX对象的浏览器兼容

window.onload = function(){
  var oBtn = document.getElementById("btn1");
  oBtn.onclick = function(){

      /* 
          XMLHttpRequest  IE8以下不兼容
          IE8以下声明ajax的方法是
              ActiveXObject("Microsoft.XMLHTTP");
       */
      //1、创建ajax对象
      var xhr = null;
      if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
      }else{
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }

      //2、调用open
      /* 
          第一个参数： 请求方式  get post
          第二个参数：url
          第三个参数： 是否异步  
               true 异步
               false同步
       */
      xhr.open("get", "1.txt", true);

      //3、调用send
      xhr.send();

      //4、等待数据响应
      xhr.onreadystatechange = function(){
          if(xhr.readyState == 4){
              alert(xhr.responseText);
          }
      }

  }
}

3.2 try…throw…catch

try{
    尝试执行的代码
}catch(error){
    error 错误对象，try括号中代码执行的异常信息;
    补救代码;
}

• 执行过程：
  1、先去执行try中的代码
  2、如果try中的代码执行正常，catch中的代码就不执行了
  3、如果try中的代码执行异常，直接执行catch中的代码进行补救
  【注】更多的用在代码调试和后期维护。

try_throw_catch
throw 手动抛出异常
格式：
    try{
        尝试执行的代码
        throw new Error("异常信息文本")
    }catch(error){
        error 错误对象，try括号中代码执行的异常信息;
        补救代码;
    }

var num = 10;

try{
    alert("异常信息之前");
   //  throw new Error("这是演习，不要紧张");
    alert("异常信息之后");
    alert(3);

   //要求num是5
    if(num != 5){
       throw new Error("num的值不是5");
    }
    
}catch(error){
   alert("补救代码，Error:" + error);
}

3.3 AJAX(open方法)

• open()

  • 第一个参数： 请求方式 get post
  • 第二个参数：url
  • 第三个参数： 是否异步
    • true 异步
    • false同步

  xhr.open("get", "1.txt", true);

3.4 AJAX-onreadystatechange

• readystatechange 事件类型
  xhr.readyState 发生变化的时候调用
  0 调用open方法之前
  1 调用你send方法之后，发送请求
  2 send方法完成，已经接受到所有的响应内容
  3 正在解析下载到的数据
  4 解析完成

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        //判断本次下载的状态码都是多少
        if(xhr.status == 200){
            alert(xhr.responseText);
        }else{
            alert("Error:" + xhr.status);
        }
    }
}

3.5 AJAX-status属性

• HTTP 状态码 ajax.status
• AJAX 状态码说明
  • 1**：请求收到，继续处理
  • 2**：操作成功收到，分析、接受
  • 3**：完成此请求必须进一步处理
  • 4**：请求包含一个错误语法或不能完成
  • 5**：服务器执行一个完全有效请求失败

	100——客户必须继续发出请求
	101——客户要求服务器根据请求转换HTTP协议版本
	200——交易成功
	201——提示知道新文件的URL          
	202——接受和处理、但处理未完成
	203——返回信息不确定或不完整
	204——请求收到，但返回信息为空
	205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
	206——服务器已经完成了部分用户的GET请求
	300——请求的资源可在多处得到
	301——删除请求数据
	302——在其他地址发现了请求数据
	303——建议客户访问其他URL或访问方式
	304——客户端已经执行了GET，但文件未变化
	305——请求的资源必须从服务器指定的地址得到
	306——前一版本HTTP中使用的代码，现行版本中不再使用
	307——申明请求的资源临时性删除
	400——错误请求，如语法错误
	401——请求授权失败
	402——保留有效ChargeTo头响应
	403——请求不允许
	404——没有发现文件、查询或URl
	405——用户在Request-Line字段定义的方法不允许
	406——根据用户发送的Accept拖，请求资源不可访问
	407——类似401，用户必须首先在代理服务器上得到授权
	408——客户端没有在用户指定的饿时间内完成请求
	409——对当前资源状态，请求不能完成
	410——服务器上不再有此资源且无进一步的参考地址
	411——服务器拒绝用户定义的Content-Length属性请求
	412——一个或多个请求头字段在当前请求中错误
	413——请求的资源大于服务器允许的大小
	414——请求的资源URL长于服务器允许的长度
	415——请求资源不支持请求项目格式
	416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
	417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
	500——服务器产生内部错误
	501——服务器不支持请求的函数
	502——服务器暂时不可用，有时是为了防止发生系统过载
	503——服务器过载或暂停维修
	504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
	505——服务器不支持或拒绝支请求头中指定的HTTP版本

四、通过表单实现GET和POST请求

• action 点击submit以后跳转到的url
• method 表单的提交数据的方式

4.1GET和POST——表单

get(默认)

http://localhost/code14/1.get.php?username=xxxx&age=18&password=123abc
提交方式：是直接将数据拼接在url后面进行提交，通过?进行拼接，查询字符串
好处： 简单
缺点：
1、不安全
2、最大2kb
3、没法实现上传

post

提交方式：post提交通过浏览器内部进行提交。
好处：
1、安全
2、理论上没有上限
3、上传
缺点：比get复杂

五、AJAX——关于GET请求

六、AJAX——关于POST请求

七、AJAX封装

八、JSON对象

九、拓展总结