黑马程序员技术交流社区

标题: ajax第三天笔记 [打印本页]

作者: 枫叶飘呀飘 时间: 2019-5-31 13:05
标题: ajax第三天笔记
同源和跨域
同源：
浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同
跨域：
不同源则跨域
1）不允许进行DOM操作
2）不能进行ajax请求
跨域方案：
服务器端跨域 CORS跨域：cross-origin resource sharing
header( 'Access-Control-Allow-Origin:*' ); ->  服务端允许所有跨域操作
header( 'Access-Control-Allow-Origin:http://www.study.com');  ->  允许指定域名跨域

JSONP（通用）
其本质是利用了<script src=""></script>标签具有可跨域的特性，
由服务端返回一个预先定义好的Javascript函数的调用，
并且将服务器数据以该函数参数的形式传递过来，
此方法需要前后端配合完成。

只能以GET方式请求

对跨域请求的封装
function test(result){
         console.log(result);
      }
      // 定义自己的ajax
      var $ ={
         ajax:function(option){
            var url = option.url;
            var callback = option.callback;
            var dataType = option.dataType;
            // 当dataType为jsonp的时候我们需要发起一个跨域请求
            if(dataType == "jsonp"){
                  // 1.创建一个script标签
                  var script = document.createElement("script");
                  // 2.为script标签设置src属性，同时在src中传入之后需要挨靠的函数名称
                  script.src = url +"?callback="+callback;
                  // 3.将生成的script标签添加到页面结构中
                  document.body.appendChild(script);
            }
         }
      };
      // 我也希望通过$.ajax的方式发送请求，当我传入dataType:jsonp的时候，希望能够发送一个跨域请求
      $.ajax({
         type:'get',
         url:'http://day8.com/corss.php',
         callback:'test',
         dataType:"jsonp"
      });

      1. 主要是利用了script标签的天然的跨域特性来发送请求
      2. 它的实现方式：在发送请求的时候传递一个函数名称给后台，后台返回数据的时候会返回这个函数的调用形式，并且在()中拼接参数
      3. ajax和jsonp的本质不一样。ajax的核心是通过XMLHttpRequest来发送请求，而jsonp是通过script标签来实现请求的发送

XMLHttpRequest2.0
设置超时【当请求超时，监听超时事件就会被触发】
设置超时 xhr.timeout
监听超时事件 xhr.ontimeout = function () {// code}

FormData
之前获取表单内容的方法
1.手动拼接url
2.如果是jq,那么就可以使用表单序列化方法
3.现在在XMLHttpRequest2.0 ,我们可以使用FormData来收集表单数据

采用FormData获取表单内容的方法
1.获取表单
var myform = document.querySelector("#form1");
2.将表单做为参数传递，在创建formData对象的时候
var formdata = new FormData(myform);

特点之一：可以自由的追加参数
formdata.append("address","传智播客");

3.生成的formData对象就可以直接做为异步对象的参数传递
   浏览器会自动为我们设置一个合适的请求头 -> post无需添加请求头
如果人为了设置了请求头，那么文件数据无法正确的传递
xhr.send(formdata);

上传进度
利用XMLHttpRequest我们可以实现文件的上传
可以通过xhr.upload.onprogress = function (ev) {// code}，监听上传的进度
这时我们上传的进度信息会保存在事件对象ev里
ev.loaded 表示已上传的大小，ev.total表示文件整体的大小
var percent = ev.loaded / ev.total

注意：上传文件有限制，到配置文件中修改  upload_max_filesize 。。。
         上传文件保存的名字不能有中文，不然会有警告出现
// 监听文件上传的进度:这个监听必须在send之前来设置

利用ajax实现表单的增删改查
查：
因为后面的增删都要多次用到查模块的渲染，所以这里可以把查模块封装为一个函数。
根据接口文档，通过ajax请求对应接口的数据，然后利用模板引擎将数据渲染到页面上

删：
点击按钮，通过ajax发送请求到对应接口上，根据接口返回的信息提示用户相关操作结果
细节：可以通过window.confirm('')函数确认用户真的执行此操作
删除的时候要考虑当前页面只有一条数据，或是当前为第一页的最后一条数据
如果当前页面只有一条数据，并且如果当前的页码为第一页，通过调用查的渲染函数，传入当前页码的参数，实现渲染当前页的效果，如果当前页码不为第一页，那么调用查的渲染函数传入当前页码数减1的参数，实现上一页数据的渲染效果。当前页面有多个数据，那么渲染当前页面的数据即可。因为这里需要用到页码数，所以在查模块获取数据的时候，我们可以把当前页码数设置为全局变量，以便后面使用

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2