2021-04-30Ajax第三天

一、使用xhr发起GET请求

①创建 xhr 实例对象

var 对象名 = new XMLHttpRequest( )

②调用 xhr.open() 函数

对象名.open( "GET" ，"请求的URL地址" )

③调用 xhr.send( ) 函数

对象名.send( )

④监听 xhr.onreadystatechange 事件

对象名.onreadystatechange = function () {
　　　//监听xhr对象的请求状态：readyState; 服务器的响应状态status
　　　 if (xhr.readyState === 4 && xhr.status === 200) {
　　　　　 // 获取服务器响应的数据
　　　　　 console.log(xhr.responseText)
　　　 }
　}

            // 1.创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2.调用open函数
            xhr.open('GET',"http://www.liulongbin.top:3006/api/getbooks?id=1")
            // 3.调用send函数
            xhr.send();
            // 4.监听函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }

二、带有参数的GET请求

1.用xhr对象发起GEt请求时，参数的位置写到open( ）方法里的URL地址后面。

对象名.open( "GET" ，" http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记 " )

2.查询字符串

定义：在URL地址后面拼接的参数字符串，叫做查询字符串
格式：将英文的? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用& 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

对象名.open( "GET" ，" http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记 " )

3.GET请求携带参数的本质

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

4.URL编码

定义：URL地址中，只允许出现英文相关的字母、标点符号、数字
编码原则：使用安全的字符（没有特殊用途或特殊意义的可打印字符）表示不安全的字符。
URL编码原则的通俗理解：使用英文字符去表示非英文字符

5.URL的编码与解码

编码：var str = encodeURI( 字符串 ）
解码：var str = decodeURI( 字符串 ）
返回值就是编码或者解码后的字符串，可以用str变量接收。

6.XMLHttpResponse对象的readyState属性（面试题）
捕获.PNG

三、使用xhr对象发起post请求

①创建 xhr实例 对象

var 对象名 = new XMLHttpRequest( )

②调用 xhr.open() 函数

对象名.open( "POST" ，"请求的URL地址" )

③设置 Content-Type 属性（固定写法）

xhr.setRequestHeader('Content-Type' ， 'application/x-www-form-urlencoded')

注意：如果传输文件类型的数据，需要修改Content-Type的值。

④调用 xhr.send() 函数，要发送的数据以查询字符串的形式作为参数传入。

对象名.send( " id=1&bookname=红楼梦&author=曹雪芹" ）

⑤监听 xhr.onreadystatechange 事件

对象名.onreadystatechange = function () {
　　　//监听xhr对象的请求状态：readyState; 服务器的响应状态status
　　　 if (xhr.readyState === 4 && xhr.status === 200) {
　　　　　 // 获取服务器响应的数据
　　　　　 console.log(xhr.responseText)
　　　 }
　}

            // 1.创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2.调用xhr.open()函数
            xhr.open('Post', 'http://www.liulongbin.top:3006/api/addbook')
            // 3.设置Content-Type属性
            xhr.setRequestHeader('Content-Type',  'application/x-www-form-urlencoded')
            // 4.调用xhr.send()函数
            xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
            // 5.监听函数
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }

四、数据交换格式

1.数据交换格式

数据交换格式就是服务器端与客户端之间进行数据传输与交换的格式。

前端领域，常用的两种数据交换格式分别是 XML 和 JSON（重点）。

2.XML

（1）XML与HTML类似，都是标记语言，但是两者没有任何关系。

（2）XML与HTML对比：

  • HTML 被设计用来描述网页上的内容，是网页内容的载体
  • XML 被设计用来传输和存储数据，是数据的载体

（3）XML的缺点：

  • XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
  • 在 Javascript 中解析 XML 比较麻烦

3.JSON

3.1 　什么是JSON

JSON 就是 Javascript 对象和数组的字符串表示法。JSON 的本质是字符串。

3.2 　JSON的两种数据结构

JSON 就是用字符串来表示 Javascript 的对象和数组。

3.3 　对象结构

{ "key1" ：value1 ， "key2" ： value2, … }

①数据结构为{ "key1" ：value1 ， "key2" ： value2, … }的键值对结构。
②key 必须是使用英文的双引号包裹的字符串，
③value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

捕获.PNG

3.4 　数组结构

[ "java", "javascript", 30, true … ]

数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

捕获.PNG

3.5 　JSON语法注意事项

① 对象中属性名必须使用双引号包裹
② 字符串类型的值必须使用双引号包裹
③ JSON 中不允许使用单引号表示字符串
④ JSON 中不能写注释
⑤ JSON 的最外层必须是对象或数组格式
⑥ 不能使用 undefined 或函数作为 JSON 的值

3.6 　JSON字符串与js对象（数组）的转换

（1）把js对象（数组）换成JSON字符串

JSON.stringify（"数据"）

（2）把JSON字符串转换成js对象（数组）

JSON.parse（"字符串"）

      // 1.将JSON字符串转换成js对象（数组）
      var jsonStr = '{"name": "吴磊","age":22,"hobby":["打篮球","刺激战场"]}';
      console.log(jsonStr);
      var result = JSON.parse(jsonStr);
      console.log(result);

      // 2.将js对象（数组）转换成JSON字符串
      var arr = ['你好', 22, null, { name: '吴磊' }];
      console.log(arr);
      var result2 = JSON.stringify(arr);
      console.log(result2);
3.7　序列号与反序列化

①把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

②把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

五、封装自定义Ajax函数--myAjax( )

1.封装一个函数，将调用myAjax( )时提交的参数转换成查询字符串
2.在myAjax( )函数中：
①创建XMLHttpRequest对象
②判断查询类型是GET还是POST，执行不同操作
③创建监听事件onreadystatechange

        // 1.准备工作：封装函数，将对象形式的data数据转换成查询字符串
        function resolveData(data) {
          var arr = [];
          for (let k in data) {
            arr.push(k + '=' + data[k]);
          }
          return arr.join('&');
        }
        // var obj = { name: '吴磊', age: 22 };
        // console.log(resolveData(obj));

        // 2.封装自己的Ajax函数
        // ①创建 xhr 对象
        // ②将参数转换成查询字符串
        // ③判断查询类型，进行不同操作
        // ④监听 onreadystatechange 事件
        function myAjax(options) {

          var xhr = new XMLHttpRequest();

          var addressStr = resolveData(options.data);
          if (options.method.toUpperCase() === 'GET') {
            xhr.open(options.method, options.url + '?' + addressStr);
            xhr.send();
          } else if (options.method.toUpperCase() === 'POST') {
            xhr.open(options.method, options.url);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(addressStr);
          }

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              var result = JSON.parse(xhr.responseText); //将返回的数据转换为js对象
              options.success(result); //调用用户的success方法，将返回的数据当做实参传入
            }
          };
        }

        // 3.测试自定义Ajax函数
        myAjax({
            method: "get",
            url: "http://www.liulongbin.top:3006/api/getbooks",
            data: {id:1},
            success: function(res){
                console.log(res);
            }
        });

六、XMLHttpRequest Level2的新特性

1. 旧版XMLHttpRequest的缺点
  • 只支持文本数据的传输，无法用来读取和上传文件
  • 传送和接收数据时，没有进度信息，只能提示有没有完成
2.XMLHttpRequest Level2的新功能

①可以设置 HTTP 请求的时限
②可以使用 FormData 对象管理表单数据
③可以上传文件
④可以获得数据传输的进度信息

3.设置HTTP请求时限

新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：

xhr对象.timeout = 3000 （单位是毫秒）

上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。
与之配套的还有一个timeout 事件，用来指定回调函数：

xhr对象.ontimeout = function() { }

      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');

      // 设置请求时限
      xhr.timeout = 30;
      // 请求超时后的回调函数
      xhr.ontimeout = function () {
        alert('请求超时!');
      };
      
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
        }
      };
4.FormData对象
  • Ajax在提交表单数据时，需要通过JQuery提供的serialize( )方法快速获取表单信息。
  • 为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作。

（1）手动给FormData对象添加数据
①创建FormData实例
②使用append("属性名" ，"属性值" )方法为FormData实例添加数据
③在xhr对象调用send()方法时，直接将FormData实例传入。

     // 1.创建FormData实例对象
      var fd = new FormData();
      // 2.为实例对象添加数据
      fd.append('username', '吴磊');
      fd.append('password', '980903');

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
      xhr.send(fd);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(JSON.parse(xhr.responseText));
        }
      };

    /* Object
      data: {username: "吴磊", password: "980903"}
      message: "测试FormData表单提交成功！"
      __proto__: Object */

（2）用FormData对象获取form表单的数据 （重点！！！）

var fd = new FormData (form表单对象 )；

①在创建FormData实例时，直接将form表单的原生DOM对象传入，表单数据会自动填充到 FormData 对象中。(注意！！！）
②fd接收到的就是查询字符串。
③替代了JQuery提供的serialize( )方法。
④FormData对象获取的表单值必须有name属性。
⑤FormData对象只支持POST请求，不支持GET请求。
⑥使用FormData对象发送POST请求时，没有第三步！！！千万不能写！！！。

     $('#f').on('submit', function (e) {
          e.preventDefault();

          // 创建FormData实例，自动获取form表单的数据
          var fd = new FormData(this);

          // 发起POST请求，提交数据
          var xhr = new XMLHttpRequest();
          xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
          xhr.send(fd);
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
              console.log(JSON.parse(xhr.responseText));
            }
          };
        });

    <form action="" id="f">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="password">
        <button type="submit">提交</button>
    </form>
5.利用FormData对象上传文件 （重点！！！）

① 定义 UI 结构

一个文件选择框、一个上传按钮、一张图片

② 验证是否选择了文件

文件选择框有一个files属性，是一个数组，存储了我们选择待上传的文件。

③ 向 FormData 中追加文件

FormData对象.append( "属性名" ，"文件选择框数组[ 0 ]"

④ 使用 xhr 发起上传文件的POST请求

使用FormData对象发送POST请求时，没有第三步。。

   <!-- 1.定义UI结构 -->
    <input type="file" />                           <!-- 文件选择框 -->
    <button>上传</button>                           <!-- 上传按钮 -->
    <img src="" alt="" id="img" width="500px" />    <!-- 显示上传成功的图片 -->

    <script>
      // 2.验证是否选择了文件
      $('button').on('click', function () {
        var filesArr = document.querySelector('input').files; //文件选择框的files属性是一个数组
        if (filesArr.length <= 0) {
          return alert('请选择上传文件');
        }

        // 3.向FormData对象追加文件
        var fd = new FormData();
        fd.append('userFile', filesArr[0]);

        // 4.发起上传文件的POST请求
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
        xhr.send(fd);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            // 根据返回的数据判断文件是否上传成功
            if (data.status === 200) {
              $('img').prop('src', 'http://www.liulongbin.top:3006' + data.url);
            } else {
              console.log('图片上传失败');
            }
          }
        };
      });
    </script>
6.显示文件上传进度

（1）新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。

（2）事件对象e有三个重要属性：
①e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
②e.loaded 已传输的字节
③e.total 需传输的总字节

（3）在创建xhr对象之后，发送POST请求之前，监听上传进度。

        // 5.监听上传进度
        xhr.upload.onprogress = function (e) {
          // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
          if (e.lengthComputable) {
            // e.loaded 已传输的字节
            // e.total 需传输的总字节
            var percentComplete = Math.ceil((e.loaded / e.total) * 100);
            console.log(percentComplete);
          }
        };
7.使用BootStrap渲染进度条

①复制一个BootStrap的进度条HTML结构
②在监听文件上传的事件中，将上传进度赋值给进度条。
③POST请求完成后，使用xhr.upload.onload事件可以添加文件上传成功后的回调函数。

    <!-- 1.定义UI结构 -->
    <!-- 文件选择框 -->
    <input type="file" />
    <!-- 上传按钮 -->
    <button>上传</button>
    <!-- BootStrap进度条 -->
    <div class="progress" style="width: 600px; margin: 10px 50px" >
      <div class="progress-bar progress-bar-striped active" style="width: 0" id="percent">
        0%
      </div>
    </div>

    <script>
      // 2.验证是否选择了文件
      $('button').on('click', function () {
        var filesArr = document.querySelector('input').files; //文件选择框的files属性是一个数组
        if (filesArr.length <= 0) {
          return alert('请选择上传文件');
        }

        // 3.向FormData对象追加文件
        var fd = new FormData();
        fd.append('userFile', filesArr[0]);

        var xhr = new XMLHttpRequest();
        // 5.监听上传进度
        xhr.upload.onprogress = function (e) {
          // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
          if (e.lengthComputable) {
            // e.loaded 已传输的字节
            // e.total 需传输的总字节
            var percentComplete = Math.ceil((e.loaded / e.total) * 100);
            // 渲染BootStr进度条
            $('#percent').attr('style', 'width:' + percentComplete + '%');
            $('#percent').html(percentComplete + '%');
          }
        };

        // 4.发起上传文件的POST请求
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
        xhr.send(fd);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            // 根据返回的数据判断文件是否上传成功
            if (data.status === 200) {
              $('img').prop('src', 'http://www.liulongbin.top:3006' + data.url);
            } else {
              console.log('图片上传失败');
            }
          }
        };

        // 6.文件上传完成后的监听函数
        xhr.upload.onload = function () {
          $('#percent')
            // 移除上传中的类样式
            .removeClass()
            // 添加上传完成的类样式
            .addClass('progress-bar progress-bar-success');
        };
      });
    </script>

七、jQuery实现文件上传（与进度监听）

还是借助FormData对象上传文件。
与上面的区别：
（1）上面使用XMLHttpRequest对象发送POST请求；jQuery必须使用ajax( )方法。
（2）Ajax请求中必须添加以下属性

contentType: false,
processData: false,

（3）
使用原生js获取数组：
var filesArr = document.querySelector('input').files；
使用jQuery：
var filesArr = $('input')[0].files
（4）可以监听Ajax请求开始与结束的函数。

$(document).ajaxStart( callback( ) )

$(document).ajaxStop( callback( ) )

    <!-- 1.定义UI结构 -->
    <!-- 文件选择框 -->
    <input type="file" />
    <!-- 上传按钮 -->
    <button>上传</button>

    <script>
      // 发起Ajax请求时打印内容
      $(document).ajaxStart(function () {
        console.log('发起了Ajax请求');
      });
      // Ajax请求结束时打印内容
      $(document).ajaxStop(function () {
        console.log('Ajax请求结束了');
      });

      // 2.验证是否选择了文件
      $('button').on('click', function () {
        var filesArr = $('input')[0].files; //文件选择框的files属性是一个数组
        if (filesArr.length <= 0) {
          return alert('请选择上传文件');
        }

        // 3.向FormData对象追加文件
        var fd = new FormData();
        fd.append('userFile', filesArr[0]);

        var xhr = new XMLHttpRequest();
        // 4.发送POST请求
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
          contentType: false,
          // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
          processData: false,
          success: function (res) {
            console.log(res);
          },
        });
      });
    </script>

八、axios

axios是一个只专注于数据请求的库。

1.使用axios发起GET请求　（$.get( )）

①引入axios.js文件
②

axios.get ( " url " ， { params：{参数} } ）.then ( callback() )

2.使用axios发起POST请求 　( $.post( ) )

①引入axios.js文件
②

axios.post ( " url " ， {参数} ）.then ( callback() )

        // 2.使用axios发起get请求
        axios.get('http://www.liulongbin.top:3006/api/get',{params: {id:1}}).then(function(res){
            console.log(res.data);
        })
        // 3.使用axios发起POST请求
        axios.post('http://www.liulongbin.top:3006/api/post',{ location: '北京', address: '顺义' }).
         then(function(res){
            console.log(res.data);
        })
3.直接使用axios发起请求 （ $.ajax( ) ）

axios( {
　　 method："请求类型"，
　　 url: "URL地址"，
　　 data: { POST数据 }　　　或者
　　 params: { GET参数 }
　　} ).then(callback)

     // 1.发起GET请求
     axios({
       method: 'GET',
       url: 'http://www.liulongbin.top:3006/api/get',
       params: { id: 1 },
     }).then(function (res) {
       console.log(res.data);
     });

     // 2.发起POST请求
     axios({
       method: 'POST',
       url: 'http://www.liulongbin.top:3006/api/post',
       data: { bookname: '列夫托尔斯泰', author: '阴间出版社' },
     }).then(function (res) {
       console.log(res.data);
     });
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351

推荐阅读更多精彩内容

  • 第三天:jQuery进阶
    一.JQ对象与DOM对象区别 document.getElementById('test');:DOM对象$("#...
    cxyexe阅读 276评论 0赞 2
  • [前端学习]AJAX部分学习笔记，第三天
    跨域的由来 实际上浏览器为了保证安全性，对ajax使用了一种同源策略 同源的意思就是：ajax发送请求的url地址...
    印象rcj阅读 229评论 0赞 0
  • Ajax第三天
    XML XML是一种标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据）。 HTML...
    左耳击水兽阅读 247评论 0赞 0
  • ajax http
    AJAX - 阿贾克斯 1、URL 1、作用 用于表示互联网上任意一个资源的位置 2、详解 格式： :// : @...
    悦动燃爆阅读 384评论 0赞 0
  • 2021-04-15jQuery第三天
    普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。不能给动态生成的元素绑定事件。 二、jQuer...
    大刀劈向鬼子阅读 66评论 0赞 0