前端知识点总结——AJAX

前端知识点总结——Ajax

1.ajax

1.URL的作用
  用于表示任意一个资源的位置（互联网上）

2.详解
  格式：
  <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
  scheme:方案\协议，以哪种方式到服务获取资源，协议不区分大小写，
  常见的协议：http,https,ftp
  ssh:安全的远程登录
  SMTP:邮件传输
  POP3：邮件接收
  DNS：域名解析
  TELNET:远程登录
  host:主机名，服务器主机名或IP地址或域名（由DNS转换为IP地址） 127.0.0.1=localhost
  port:端口号 80 443
  user:用户名，访问某些特定资源时需要用到的信息
  pwd:密码，访问某些特定资源时需要用到的密码
  path:路径，资源在服务器上具体存放位置
  params:参数（跟服务器有关）
  query:查询字符串，要传递给服务器的数据
  http://127.0.0.1/login.php?uname=dangdang&upwd=12345
  frag:锚点
  http://127.0.0.1/a.html#NO1

针对前端的进阶和提升，特邀资深前端工程师直播讲解热门技术、代码案例、面试技巧等。前端开发学习扣qun 767273102 ，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！内有开发工具，很多干货和技术资料分享！希望新手少走弯路

2.HTTP协议

1.什么是HTTP
  Hyper Text Transfer Protocol:超文本传输协议
  规范了数据如何打包以及传递

2.详解
  1.请求（request）消息
    客户端带给服务器的数据都有哪些，由三部分组成
  1.请求的起始行
    1.请求方法
      1.GET
        表示客户端向服务器获取资源时使用
        特点：
       1.无请求主体
       2.靠地址栏传递查询字符串
      2.POST
        表示想传递数据给服务器时使用
    特点：
       1.有请求主体
      3.PUT
        表示客户端想放置文件到服务器（禁用）
      4.DELETE
        表示客户端要删除服务器端的数据（禁用）
      5.HEAD
        表示客户端只想获取指定的响应头
      6.CONNECT
        测试连接
      7.TRACE
        追踪请求路径
      8.OPTIONS
        选项，保留以后使用
    2.请求URL
    3.协议版本：HTTP/1.1

2.1请求头

    1.Host:localhost/127.0.0.1
      作用：告诉浏览器请求哪一个主机
    2.Connection:keep-alive
      作用：告诉服务器要进行持久连接
    3.User-Agent:
      作用：告诉服务器自己（浏览器）的类型
    4.Accept-Language:zh-cn
      作用：告诉服务器自己能接纳的自然语言
    5.Accept-Encoding:gzip
      作用：告诉服务器自己能接收的数据压缩类型是什么
    6.Referer:http:localhost/Day01/login.html
      作用：告诉服务器请求来自哪个页面
      3.请求主体
    Form  Data

2.2响应（response）消息

    1.响应起始行
  1.协议版本号：HTTP/1.1
  2.响应状态码
    作用：告诉浏览器，服务器的响应状态是什么问题（有问题，没有问题，有问题\问题大概是什么）
    1xx:100-199 提示信息
    2xx:成功响应
        200:ok
    3xx：需要进行重定向
        301：永久性重定向
    302：临时重定向
    304：Not Modified
    4xx:客户端请求错误
        404：Not Found 请求资源不存在
    403：Forbidden 权限不够
    405：Method Not Allowed 请求方法不被允许
    5xx:服务器运行错误
        500：服务器内部错误

2.3原因短句

    对状态码的简单解释
    2.响应头

     1.Date
    作用：告诉浏览器，服务器的响应时间
          格林尼治时间（+8h）

  2.Connection
    作用：告诉浏览器已经启动持久连接

  3.Content-Type
    作用：响应主体的类型是什么，告诉浏览器，用什么样的方式解析响应主体
       1.text/html:响应回来的数据是html文本
       2.text/plain:响应回来的数据是普通文本
       3.text/css:响应回来的数据是css样式
       4.application/xml:响应回来的数据是xml格式
       5.application/javascript:响应回来的数据是js脚本代码
       6.application/json:响应回来的数据是json格式的字符串
       7.images/jegp:响应回来的数据是图片

    3.响应主体
  Response

3.缓存

1.什么是缓存 & 工作原理

  客户端将服务器响应回来的数据进行自动保存，当再次访问时，直接使用保存的数据。

2.缓存的优点
  1.减少了冗余数据的传输，节省客户端流量
  2.可以节省服务器带宽
  3.降低对服务器资源的消耗和运行要求
  4.降低了由于远距离而造成的延时加载

3.与缓存相关的消息头
  1.Cache-Control消息头
    作用：从服务器将文档传到客户端时起，可以认为此文档处于新鲜的秒数
语法：
   Cache-Control:max-age=处于新鲜的秒数
   ex:
     Cache-Control:max-age=3600;
     Cache-Control:max-age=0;每次都从服务器下载新资源
  2.Expires消息头
    作用：指定缓存过期的确切时间（格林尼治时间）
语法：Expires:Thu,23 Nov 2017    GMT
如果希望客户端不缓存，可以给一个过期的时间
Expires:Wed,22 Nov 2017 00:00:00 GMT
Expires:0;---此方法不标准，执行性不是特别好
4.在网页上设置消息头
  1.更改服务器配置
  2.网页上增加消息
  <meta http-equiv="消息头" content="值">
    ex:
  <meta http-equiv="Cache-Control" content="max-age=3600">
或
  <meta http-equiv="Expires" content="0">
  php:
    header("Expires:0");
  Response.AddHeader("Expires","0");

4.AJAX

1.名词解释

1.同步（Synchronous）
  在一个任务进行中时，不能开启其它的任务
  同步访问：浏览器在向服务器发送请求的时候，浏览器只能等待服务器的响应，不能做其它的事情。
  出现场合：
     1.地址栏输入网址访问页面（www.baidu.com）
 2.a标记默认跳转
 3.submit按钮的表单提交

2.异步（Asynchronous）
  在一个任务进行中时，可以开启其它的任务
  异步访问：浏览器在向服务器发送请求时，不耽误用户在网页上做其它的操作
  使用场合：
     1.用户名的重复验证
     2.聊天室
 3.股票走势图
 4.搜索框建议（百度，京东）

2.AJAX

1.Asynchronous Javascript And Xml
  异步的      js         和 xml
2.本质:
   使用js提供的异步对象（XMLHttpRequest）,异步的向服务器发送请求，
   并接受响应数据（数据格式是Xml）
   AJAX请求中，服务器响应回来的数据部分数据而不是完整的页面，
   并且可以以无刷新的效果来更改页面的局部内容。
3.创建XMLHttpRequest对象-异步对象（xhr）
  标准创建：
      var xhr=new XMLHttpRequest();
  IE8以下：
      var xhr=new ActiveXObject("Microsoft.XMLHttp");
  允许通过window.XMLHttpRequest 来判断浏览器是否支持标准创建，
  如果浏览器不支持标准创建，那么window.XMLHttpRequest的值就是null
      if(window.XMLHttpRequest){
     var xhr=new XMLHttpRequest();
  }else{
     var xhr=new ActiveXObject("Microsoft.XMLHttp");
  }

4.XHR常用方法和属性（重点）
  1.open()
    作用：创建请求
语法：xhr.open(method,url,isAsyn);
   1.method
     string类型
     请求方式：get/post
   2.url
     string类型
     请求地址
   3.isAsyn
     boolean类型
     指定采用同步（false）还是异步(true)的方式发送请求

  2.readyState 属性
    作用：表示xhr对象的请求状态
值：0-4表示5个状态
   0：请求尚未初始化
   1：已经打开到服务器的链接，正在发送请求中
   2：请求完成
   3.正在接收服务器端的响应
   4.接收响应数据成功
 注意：当readyState的值为4的时候，才表示所有的响应都已经接收完毕。
  3.status 属性
    作用：表示的是服务器的响应状态码
值：
  记住一个值 ：200
  当status的值是200的时候，表示服务器已经正确的处理请求以及给出响应。
  4.onreadystatechange事件
    作用：当xhr的readyState属性值发生改变的时候，要自动激发的操作
(xhr对象的状态在做一些改变时，这个事件会一直监视着它)
语法：
   onreadystatechange=function(){
//判断xhr的readyState为4并且xhr的status值为200，就可以获取/响应数据了
  if(xhr.readyState==4&&xhr.status==200){
      //接收响应回来的结果
      var resText=xhr.responseText;
      console.log(resText);
  }

   }
  5.send()
    作用：发送请求
语法：xhr.send(body)
 body:请求主体
 如果没有请求主体，body位置处为null(get)
 如果有请求主体，则放请求主体数据到body位置(post)

 5.发送异步请求的步骤
   1.创建xhr对象
   2.创建请求
   3.设置xhr的onreadystatechange(回调函数)
      判断状态，并接收响应回来的数据
   4.发送请求

5.使用ajax发送post请求

注意两点：

 1.post的请求将数据放在请求主体中
   xhr.send(body);
   ex:
   xhr.send("uname=value1&upwd=value2");
 2.在发送请求之前，需要手动修改请求消息头
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

6.js对象数据格式

1.js对象的数据格式

var lindaiyu=[];
    lindaiyu[0]="林黛玉";
lindaiyu[1]="1990";
lindaiyu[2]="160cm";
lindaiyu[3]="50kg";
改版：
var lindaiyu=[];
    lindaiyu["name"]="林黛玉";
lindaiyu["birth"]="1990";
lindaiyu["height"]="160cm";
lindaiyu["weight"]="50kg";
ex:取值
  lindaiyu["name"]
数组描述的是林黛玉的个人信息，如果你把林黛玉看成是一个对象，

那么她的个人信息就是她这个对象的属性。

js对象的语法：
    var 对象名={
   属性：值,
   属性：值,
   属性：值,
   属性：值
};
ex:林黛玉这个对象所对应的属性如下
var lindaiyu={
   name:"林黛玉",
   birth:"1990",
   height:"160cm",
   weight:"50kg",
}
  如果对象取值的时候，直接对象.属性 名称就可以
   ex:lindaiyu.name --->林黛玉

7.JSON

1.什么是JSON
  JavaScript  Object Notation
     js         对象 表现方式
  js对象表示法，即以js对象的格式表现出来的字符串。
2.JSON语法
  1.JSON对象
    1.用一对{}来表示一个对象
2.对象的属性名称，必须用""引起来（单引号不可以），值如果是字符串的话，必须也用""引起来。
ex:
var computer=‘{
    "name":"电脑",
    "price":5600
    }‘
  2.JSON数组
    1.普通数组
   ‘["小乔","大乔","貂蝉"]‘
2.对象数组
  ‘[
      {
        "name":"小乔",
    "height":"160cm",
    "age":18
      },
       {
        "name":"大乔",
    "height":"163cm",
    "age":20
      },
      {
        "name":"貂蝉",
    "height":"165cm",
    "age":21
      }
  ]‘
3.JSON文件创建
  以.json为后缀的文件，里面包含的是符合json格式的数据

4.将JSON字符串，转换成js对象/数组
  var mperson=‘{"name":"TOM","age":18}‘;
  //json对象

   var arr=‘["小乔","大乔","貂蝉"]‘;
   //json数组

   var arr1=‘[
       {"name":"Lucy","age":19},
   {"name":"Lily","age":19}
   ]‘;  //json数组

如何把上面的数据转换成js对象/数组格式
   1.使用eval()将数据转换成js对象数组（不推荐）
   2.使用JSON.parse()来将JSON字符串解析为js对象
     var obj=JSON.parse(mperson); //js对象
 var obj=JSON.parse(arr);//js数组
 var obj=JSON.parse(arr1);//js数组

2.JS对象数据格式
var 对象名={

 属性：值,
 属性：值,
 属性：值

}
取值：对象名称.属性
3.JSON数据格式
var person=‘{

 "name":"TOM",
 "age":12

}‘

4.将JSON格式的数据转换js对象/数组
1.eval()
2.JSON.parse

4.1在php中，可以直接将数组转换成json格式的字符串
语法：

 通过json_encode()将数组转换为JSON字符串，并返回转换后的结果
 ex:
   在php中
   $array=["钉钉","当当","冰冰"];
   $str=json_encode($array);

8.XML

AJAX:Asynchronous Javascript And Xml
1.什么是XML

 eXtensible Markup Language
  可扩展的  标记    语言
 XML的标记没有被预定义过，需要自定义
 XML的宗旨是做数据传递的，而非显示数据

2.XML的语法结构

 XML可以独立保存为***.xml的文件，也可以以字符串的形式出现
   1.XML的最顶端是XML的声明
     <?xml version="1.0" encoding="utf-8"?>
   2.XML标记的语法
     1.XML标记必须成对出现
   <person> 错误
 2.XML严格区分大小写，开始和结束必须一致
   <person></person> 正确
   <Person></person> 错误
 3.XML的标记允许被嵌套，注意嵌套顺序
   <person>
      <name>
         <FirstName></FirstName>
     <LastName></LastName>
      </name>
   </person>
  4.每个标记都允许自定义属性，格式与html一致，但属性值，必须用""括起来
    <person no="1001"></person>
  5.每个XML文档，必须有一个根元素

3.解析XML文档对象的内容

 1.核心方法
   elem.getElementsByTagName("标签名称");
   返回值：返回一个包含指定元素们的“类数组” （用for循环遍历）
   ex:var xmlDoc=xhr.responseXML;
     xmlDoc.getElementsByTagName("Student");

4.在PHP中返回XML格式的字符串

 1.必须增加响应消息头
   header("Content-Type:application/xml");
 2.按照XML的语法结构，拼xml字符串，再响应给前端

 $xml="<?xml version=‘1.0‘ encoding=‘utf-8‘?>";
  $xml.="<StudentList>";
  ...
  $xml.="</StudentList>";
  echo $xml;

原文地址：https://blog.51cto.com/14392904/2412342