Ajax 编程一、Ajax基础 1.Ajax概述：浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应

一、Ajax基础

1.Ajax概述：

浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验

2.Ajax的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

3.Ajax的运行环境：

Node创建的服务器当中，及网站服务器

4.Ajax的实现步骤

创建Ajax对象

var xhr=new XMLHttpRequest();
告诉Ajax请求地址以及请求方式

xhr.open('get','www.example.com');
发送请求

xhr.send();
获取服务器端给予客户端的响应数据

xhr.onload=function(){ console.log(xhr.responseText); }
服务器端响应的数据格式以JSON对象作为响应数据的格式
请求参数传递

*GET请求方式 //配置ajax对象

xhr.open('get', 'http://localhost:3000/get?' + params); *POST请求方式

请求参数的格式

  *？username=123&age=456
  //设置请求参数格式的类型 post请求必须要设置
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  *application/json{
      name:'zhangsan',
      age:'20',
      sex='男'
      }；
  xhr.setRequestHeader('Content-Type', 'application/json');

JSON.stringify() //将json对象转换为json字符串 注意：get请求不能提交json对象数据格式的，传统网站的表单提交也不支持json对象数据格式的 8. 获取服务器端的响应 (了解) Ajax状态码: xhr.readyState //获取状态码 onreadystatechange 事件

xhr.onreadystatechange(function(){
        if(xhr.readyState == 4){
             console.log(xhr.responseText);
        }
})

9. Ajax错误处理

网络畅通，服务器能接收到请求，服务器端返回的结果不是预期的结果可以判断服务器返回的状态码，分别进行处理， xhr.status 获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码,检查请求地址是否错误
网络畅通，服务器端能收到请求，返回500状态码,服务器端有错误
网络中断，请求无法发送到服务器会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

//Ajax状态码：表示Ajax请求的过程

//HTTP状态码：表示返回的结果

低版本IE浏览器的缓存问题解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求传参数的值不相同 xhr.open('get', 'http://localhost:3000/error?=' + Math.random());
同步异步概述

二、Ajax异步编程

1.Ajax封装

问题：发送依次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求代码封装到函数中，发送请求是调用函数即可

2.模板引擎

作用：使用模板引擎提供的模板语法，可以将数据和HTML拼接起来

下载art-template模板引擎库文件并在html页面中引入

aui.github.io/art-templat…

var html=template('模板id'，{data ： data})  //利用模板引擎中的template方法进行数据拼接

3.FormData

1.FormData对象的作用

*模拟HTML表单-->表单对象（ var formData = new FormData(form);），自动将表单对象中的数据拼接成请求参数格式

*异步上传二进制文件

//不能用于get请求  xhr.send(formData);
const formidable = require('formidable');
app.post('/formData', (req, res) => {
    //1.创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    //解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    })
});

FormData对象的实例方法

1.获取表单对象中属性的值

formData.get('key');

2.设置表单对象中属性的值 ---会覆盖原有的属性值

如果设置的表单属性不存在，将会创建这个表单属性，如果存在，将会覆盖属性原有的值

formData.set('key','value');

3.删除表单对象中属性的值

formData.delete('key');

4.向表单对象中追加属性值 ---不会覆盖已有的属性值，保留两个值

formData.append('key','value');

FormData二进制文件上传

<input type='file' id='file'/>

?FormData文件上传进度展示 FormData文件上传图片即时预览

Ajax请求限制：不能向别的服务器发送请求

*什么是同源：两个页面拥有相同的协议，域名，端口，有一个不同就不是同源

同源政策的目的：保证用户信息的安全无法向非同源地址发送Ajax请求

*使用JSONP解决同源限制问题

//向模板中开放外部变量
template.defaults.imports.dataFormat=dataFormat;

CORS跨域资源共享：及非同源

//拦截所有请求  express框架下
app.use((req, res, next) => {
    //1.允许那些客户端访问我
    //2.代表允许所有的客户端访问我
    res.header('Access-Control-Allow-Origin', '*');
    //3.允许客户端使用那些请求方式访问我
    res.header('Access-Control-Allow-Methods', 'get,post');
    next();
})

访问非同源数据，服务器端解决方案 //服务器端向另一服务器端发送请求引入第三方模块 request 服务器端直接没有同源政策

cookie复习：身份识别相当于身份证服务器端知道客户端

withCredentials属性
ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息
withCredentials：指定在涉及到跨域请求时，是否携带cookie信息默认值为false
Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

$.ajax()方法：发送Ajax请求 / 发送jsonp请求
JSON.stringify() //将json对象转换为json字符串

 $.ajax(){
      type:
      url:
         //指定当前发送jsonp请求
      dataType:'jsonp',
      【   //修改callback参数名称
          jsonp:'cb',
          //指定函数名称
         jsonpCallback: 'fn'  】


    data：JSON.stringify(params),
    //指定参数格式
    contentType:'application/json';
    beforeSend:function(){
        //请求不会被发送
        return false;
    },
    success:function(response){
    },
    error:function(xhr){
    }
}

serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

var params=$('#form').serialize();

$.get()$ .post() 方法作用：发送get请求，发送post请求
$.get('url','name=zhangsan&age=30',function(response){})
$.post('url',[对象/字符串],function(response){})

全局事件：只要页面中有ajax请求，对应的全局时间就会被触发

ajaxStart() //请求开始发送时触发
ajaxComplete() //请求完成时触发

<link rel:'stylesheet' href='nprogress.css' />
<script src='nprogress.js'></script>
$(document).on('ajaxStart',function(){
        NProgress.strat(); //进度条开始运动
})
$(document).on('ajaxComplete',function(){
        NProgress.done(); //进度条开始运动
})

RESTful风格的API
GET: 获取数据
POST：添加数据
PUT:更新数据
DELETE:删除数据

XML基础

XML是代表可扩展标记语言，作用就是传输和存储数据 XML DOM 即 XML文档对象模型，是w3c组织定义的一套操作XML文档对象的API 通过 xhr.responseXML 获取返回值