[前端] AJAX

ajax和form都可以向服务器发送请求，但是form同一时间，只能处理一个任务，会影响效率。ajax可以异步处理任务。form可以自动收集数据，然后发送给服务器，但是ajax需要手动收集数据，然后发送给服务器。

一.HTTP协议 1. 请求头

Host：要访问的主机

Connection: keep-alive，客户端告诉服务器开启持久连接

User-Agent: 告诉服务器，浏览器的类型和版本号

Accept-Language:zh-CN, 浏览器可以接收的语言类型

Accept-Encoding: gzip, deflate，浏览器可以接收的压缩文件的格式

Referer: 二级页面才有这个属性，表示这个二级页面来源于哪个页面

2. 响应 2.1 响应状态码

（1）1xx：正在处理请求

（2）2xx：响应成功

（3）3xx：重定向

301永久重定向

302临时重定向

304请求未改变，命中缓存

（4）4xx：客户端错误

404请求资源不存在

403权限不够

405请求方法不被允许

（5）5xx：服务端错误

2.2 响应头

（1）Date：服务器响应时间

（2）Connection：告诉浏览器，服务器打开了持久连接

（3）Content-Type：告诉浏览器，响应主题的类型是什么

1. text/html  html文本
2. text/css css文本
3. application/javascript js脚本文件
4. application/xml xml文件
5. application/json json文件
6. image/gif gif图片文件
7. image/png png图片文件
8. image/jpg jpg图片文件

3. 缓存

客户端将服务器响应的数据自动缓存，当再次请求时，将使用缓存的数据，而不需要再次向服务器请求。

 在request header中有一个设置：

Cache-Control: max-age=0 单位是s

从服务器将文档传输到客户端时，此文档处于新鲜的秒数，是一个相对时间。如果是0，表示不缓存，如果是3600，则表示缓存1小时

二.DOM *** 作

为什么要dom *** 作？因为form表单提交数据时，会自动收集整理数据，然后发送给服务器；但是ajax需要手动收集数据，然后发送给服务器，这个搜集数据的过程需要分成两步：

1. 找到元素对象

2. 获取这个对象的value

javascript主要由三部分组成：

1. js核心代码：ECMA Script, ES6
2. DOM：文档对象模型，就是为了 *** 作html中的元素（内容，值，样式）
3. BOM：浏览器对象模型，让js可以动态的 *** 作浏览器

1. 使用JS的dom *** 作页面数据 1.1 获取元素对象

var obj = document.getElementById("元素ID");

该方法对于任何的标签（不管是单标签还是双标签）都是有效的

1.2 获取/修改元素的值

（1）对于input标签

获取值：var val = obj_input.value

修改值：obj_input.value = xxx

（2）对于双标签元素

获取值：var htmlVal = obj.innerHTML

修改值：obj.innerHTML = xxx

（3） 简写形式

ES6中可以直接将元素的id属性作为对象使用

  
  
  


  
    输入框1：
  
  

  测试按钮

1.3 练习

创建两个input框，点击按钮时将input1中的value显示在input2中

  
    
    
    
  
  
    
      输入框1：
    
    
      输入框2：
    
    测试按钮
  

1.4 innerHTML

动态添加表格

  
  
  


  
    

      

        
登录名称
        
电子邮箱
        
联系方式
        
用户名称
        
用户性别
        
 *** 作
      
      

      
    
  
  

  
    登录名称: 

    电子邮箱: 

    联系方式: 

    用户名称: 

    用户性别: 

     *** 作        : 

  
  录入信息

1.5 事件

通过用户的行为来激发的 *** 作就是事件。

onclick 单击事件
onblur  焦点移除事件，元素失去焦点调用对应的js
onfocus 获取焦点事件，元素获得焦点，调用js

三.ajax 1. 同步/异步

（1）同步

在一个任务执行时，不能开启其他任务。

同步访问：浏览器在向服务器发送请求，只能等待服务器的响应，不能做其他事情。

出现场合：

1. 地址栏输入url访问页面
2. a标签的跳转
3. form表单的提交

（2）异步

在一个任务执行时，可以同时进行其他任务。

出现场合：

1. 用户名注册的验证
2. 百度搜索建议
3. 股票软件

2. Ajax

全称：async javascript and xml

本质：使用js提供的异步对象XMLHttpRequest，简称xhr

ajax异步的发送请求给服务器，并接收服务器返回的结果

2.1 使用ajax四部曲

1. 创建异步对象
var xhr = new XMLHttpRequest();
2. 创建请求
xhr.open(method, url, isAsync);
xhr.open("get", "http://127.0.0.1:8080/login", true);
3. 发送请求
xhr.send(formdata); get请求使用null，或者不写参数
4. 绑定监听，接收响应数据
xhr.onreadystatechange = function(){}

2.2 xhr

1. xhr.readyState属性

用于表示xhr对象的请求状态，一共有5个状态

0：表示请求尚未初始化
1：表示已经打开服务器连接，正在发送请求
2：已经开始接收响应头
3. 已经开始接收响应主体
4. 响应数据接收完毕

2.3 示例

  
  
  


  ajax