10-Ajax和github远程仓库的使用

Ajax

• Ajax主要作用是局部请求，局部响应。大幅度提高了 用户体验
• 应用场景：1.表单项离开焦点数据验证 2.搜索框内容变化时提示文字下拉列表 3. 页面上拉加载更多数据 4.列表数据无刷新分页
• 通过：本机名+端口号+网页名称访问
• 服务端响应客户端res.send() 最好不要为null

Ajax运行环境

• Ajax必须在网站环境中才能运行,以盘符打开的html是无法使用Ajax的

Ajax实现步骤

• Ajax主要用于预处理向服务器的请求和响应，再通过DOM直接修改浏览器。 相当于中转站
• 利用Ajax，服务器的请求也变得可控了。

//  创建 Ajax对象
const xhr = new XMLHttprequest()
//告诉Ajax请求方式和请求地址     必须和服务器的路由一致
xhr.open('get','/getMethod');
//发送请求
xhr.send();
//获取服务器给客户端的响应数据 xhr.responseText
//相当于req.query  可以将响应过来的数据 在DOM元素上进行操作 实现 局部变化
xhr.onload = function () {
   
    console.log(xhr.responseText)
}

将字符串转换成JSON对象 JSON.parse(string)

将JSON对象转换成对象JSON.stringify(JSON)

Ajax传递方式

• GET 请求方式

  //get请求方式需要自行拼接多个请求参数 
  xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
  

• POST 请求方式

  const parse = require('body-parser')
  app.use(bodyParser.urlencoded())   //配置路由 
  

  //要设置请求头 固定写法
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
  //post请求参数放在send()方法里面
  xhr.send('name=zhangsan&age=20');
  

• 参数为JSON对象的POST请求

  const parse = require('body-parser')
  app.use(bodyParser.json())   //请求参数为JSON 配置路由也要改为json
  

  //要设置请求头 固定写法
  xhr.setRequestHeader('Content-Type', 'application/json') 
  //JSON字符串可以通过JSON.stringify()转换为JSON对象
  xhr.send({
       name: 'zhangsan', age: '20', sex: '男'});
  

Ajax 状态码 获取服务端的响应(兼容低版本浏览器时使用)

• 0：请求未初始化(还没有调用open())
• 1：请求已经建立，但是还没有发送(还没有调用send())
• 2：请求已经发送
• 3：请求正在处理中，通常响应中已经有部分数据可以用了
• 4：响应已经完成，可以获取并使用服务器的响应了
• xhr.readyState // 获取Ajax 状态码

const xhr = new XMLHttprequest()
//  Ajax 状态码 0
xhr.open('get','/getMethod');
//  Ajax 状态码 1
//onreadystatechange事件 Ajax状态码发生变化时触发
xhr.onreadystatechange = function() {
   
    console.log(xhr.readyState) //分别打印234
    // Ajax 状态码 == 4 时 说明响应已经完成 就可以获取服务器响应的结果
    if (xhr.readyState == 4) {
   
        console.log(xhr.responseText)
    }
}
xhr.send();

Ajax 错误处理

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。 非200状态码

可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

2. 网络畅通，服务器端没有接收到请求，返回404状态码。

检查请求地址是否错误。

3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。

服务器端错误，找后端程序员进行沟通。

4. 网络中断，请求无法发送到服务器端。

会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

低版本 IE 浏览器的缓存问题

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

**解决方案：**在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax函数封装

	function ajax(obj) {
   
    //设置一个默认值对象
    var defaults = {
   
        type:'get',
        url:'',
        date:{
   },
        header:{
   
            'Content-Type':'application/x-www-form-urlencoded'
        },
        fn: function() {
   },
        error: function() {
   }
    }
    //覆盖默认值对象defaults  会影响原对象 所以不用重新赋值
    Object.assign(defaults,obj)
	var xhr = new XMLHttpRequest();
    //--声明一个空字符串 拼接传递过来的数据--
    var str = '';
    for (var attr in defaults.date) {
   
        str += attr + '=' + defaults.date[attr] + '&';
    }
    str = str.substr(0,str.length-1);
    //--拼接完成--
    //--判断请求方式代入不同的地方--
    if (defaults.type == 'get') {
   
        defaults.url = defaults.url + '?' + str ;
    }
    xhr.