ajax

• 为什么要使用ajax

• 传统网站中会有一些缺陷
• 网速慢的时候，页面加载时间长，用户只能等待
• 表单提交后，如果一箱内容不合格，就需要重新填写表单内容，体验不好
• 页面跳转，会重新加载页面，浪费资源，增加用户等待时间

• ajax的优点

• 是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站的体验
  （就是用户在浏览网页的过程中局部的更新页面的内容）

• 应用场景

• 页面上拉加载数据
• 列表数据无刷新分页
• 表单数据验证
• 搜索框提示文字下载列表

ajax运行环境

• ajax技术需要运行在网站环境中才能够生效

ajax运行原理

• ajax相当于浏览器发送请求与接收响应的代理人，在不影响用户浏览页面的情况下，局部的更新页面数据，提高用户的体验

ajax对象的定义

# 1.创建ajax对象
var xhr = new XMLrequest(); // 这就是创建ajax实例对象
# 2.告诉ajax请求地址以及请求方式
xhr.open('get','http:127.0.0.1');
# xhr.open('请求方式','请求地址');
# 3.发送请求
xhr.send();
# 4.获取服务端给客户端的响应数据
xhr.addEventlistener('load',function(){
    console.log(xhr.responseText);
});
# 当服务端响应了客户端，客户独断就会自动调用 onload事件处理函数

• 服务端响应数据格式

• 在真实项目中，服务器大多数会以json对象作为响应数据格式，当客户端拿到响应数据时，要将json数据和html字符串进行拼接，然后将拼接的结果显示在页面中
  （这里先不讲后端，另写文章）

请求参数的传递

• get请求\post请求

  • 传统网站是通过表单提交参数
  • ajax是需要自己拼接请求参数的，根据请求方式的不同，将请求参数放到对应的位置上

• 格式

  • 参数名称=值&参数名称=值

  • 对于get请求，参数是放到请求地址后面的，并且用?进行分割

    # get请求是这样的
    https://www.baidu.com/?user=lmk&passwd=kml

• get请求参数

  # 先获取元素 例如div元素表单元素等等（这里不多演示）
  
  var xhr = new XMLHttpRequest(); # 创建ajax对象
  # 表单值获取 （在html标签中定义了2个input标签）
  var namev = user.value;
  var agev = age.value;
  
  var value = '?user='+namev+'&age='+agev # 拼接请求参数
  # 配置ajax准备发送get请求到后端服务器上（这里用的falsk）
  xhr.open('get',value,true)
    # 这里value是请求参数，我在falsk后端试了一下，这里写请求参数就可以把参数传递给后端，如果在node.js中要写后端的ip地址加参数
    # true的意思是是否为异步请求，true是 flase否
  
  xhr.send(); # 发送请求
    # 服务器接收请求，给客户端发送响应数据
  # 获取服务端响应的数据
  xhr.addEventListener('load',function(){
      console.log(xhr.responseText);
  })

• post请求参数

  • post请求的请求餐数和get不一样，不是放到请求地址中，而是要放到请求体当中
  • 只需要将请求参数放到send方法中即可

    # 先获取元素 例如div元素表单元素等等（这里不多演示）
    
    var xhr = new XMLHttpRequest(); # 创建ajax对象
    var userv = user.value # 获取表单值
    var agev = age.value # 获取表单值
    var value = 'user='+userv+'&age='+agev; # 拼接请求参数
    xhr.open('post',''); # 配置ajax请求 
      # 请求为 post请求 第二个参数不写就默认为/路径 默认为true（异步）
      # node.js要写请求地址（这里由于是flask只写请求路径即可）
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); # post请求中必须要设置请求参数的格式类型
    xhr.send(value) # 发送post请求 ，参数
        
    # 服务器接收请求，给客户端发送响应数据
    # 获取服务端响应的数据
    xhr.addEventListener('load',function(){
      console.log(xhr.responseText);
    })

get请求和post请求的区别

• post请求必须要请求报文中，明确设置请求参数内容的类型