A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 游运连 初级黑马   /  2019-6-12 16:01  /  831 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

ajax:
  在页面不刷新的情况下,请求服务器局部更新页面的数据

同步:同一时刻只能做一件事,前一件事做完在做后一件。
异步:同一时刻做多事,【实现前后端的交互】
  XMLHttpRequest()
    请求报文:
      请求行:请求方式,请求url/协议
          如果是get请求,数据就在url后面拼接过去
            xhr.open("get","./路径?name=jack&age=18&a=99&b=ccc");
          如果是post请求:
             xhr.open("post",一个url);
      请求头:客户端发送给服务器的一些额外信息
      请求体:客户端传递给服务器的数据
              如果是get请求:
                xhr.send(null);
              如果是post请求就需要在send中传递 name=jack&age=18&gender=男
                   xhr.send("name=jack&age=18&a=99&b=ccc");
      

        ajax发送get请求
    异步对象的基本代码模式:(get请求)
       创建异步对象
           var xhr = new XMLHttpRequest();
       设置请求行:
           //url通常是一个php文件,可以返回信息
           //?给要传到后台的参数,并连接字符串
           xhr.open("get",一个url);
                 xhr.open("get", "./路径?name=jack&age=18&a=99&b=ccc");
       设置请求体:
        xhr.send(null);
        xhr.onreadystatechange = function() {
                 if (xhr.status == 200 && xhr.readyState==4) {
                   //获取返回文本
                   var str=xhr.responseText;
                   //在什么里显示后台传递过来的数据
                   xx.value=str;
                 }

        ajax发送post请求
          异步对象的基本代码模式:(post请求)
      创建异步对象
          var xhr = new XMLHttpRequest();
      设置请求行:
          //?给要传到后台的参数,并连接字符串
          xhr.open("post",一个url);
          xhr.setRequesHeader("Content-Type","application/x-www-form-urlencoded");   
      设置请求体:带键值对形式的数据
       xhr.send("name=jack&age=18&a=99&b=ccc");
        xhr.onreadystatechange = function() {
                if (xhr.status == 200 && xhr.readyState==4) {
                  //获取返回文本
                  var str=xhr.responseText;
                  //在什么里显示后台传递过来的数据
                  xx.value=str;
                }

        ajax处理json数据
                 获取json数据格式并处理的方式:【不区分get还是post】
              if (xhr.status == 200 && xhr.readyState==4) {
                //获取返回文本
                var str=xhr.responseText;
                //将json文本解析为json对象
                var obj=JSON.parse(str);
                //在什么显示后台传递过来的数据
                xx.value=str;
              }

       
               
        ajax处理xml数据:
    获取xml数据格式并处理的方式:
      服务器端:
        header("Cotent-Type:application/xml;charset=utf-8);
      客户端:
        if(xhr.status==200&&xhr.readyState==4){
        获取返回xml文档对象
          var xmlObj=xhr.responseXML;
        dom常规操作
          var obj1=xmlObj.getElementById("dv");
          var obj2=xmlObj.querySelector("#dv2");
          var items=xmlObj.querySelectorAll("item");

        }

模板引擎:
  用户界面与业务数据分离
  用于生成特定的网页结构快
  渲染数据时,代替拼接字符串操作。



  对对象进行遍历,就可以取得
    例:
      title 对应的值 平凡之路
      var key="title";
      responseText="<%=" + key + "%>"; 等于  "<%=title%>"


      模板:
        <script type="text/template" id="navTemp">
      引入插件
        <script type="template-native.js"></script>
      数据结构动态生成
        var obj=[{}];
      调用模板引擎的函数,返回值为替换之后的动态结构
        var html = template(模板id,数据(对象));
          var html = template("navTemp",obj);

      简介语法:
        var data={"name":'jack',"age":18};
        <p>{{name}}</p>
        <p>{{age}}</p>

        var data1=[{"name":'jack',"age":18},{"name":'rose',"age":19}];
        此时需要包装为对象:
          var obj={"items":data1};
          {{each items as value key}}
          第一种写法:
            <p>{{items[key].name}}</p>
          第二种写法:
            <p>{{value.age}}</p>


ajax思路:
  function ajax(url,type,data,callback);
  function ajax(option);
  var $={
    ajax:function(option){},
    get:function(...){},
    opst:function(...){}
  }

  使用方法:
    $.ajax(){
      url:
      type:
      data:
      dataType://返回的类型,比如json,xml,text,html
      success:发送请求后
      timeout:
      beforeSend:function(){},发送前做什么事
      error:
      complete:
    }


同源:协议,域名,端口完全一样
跨域:不同源就是跨域,不允许进行dom操作,也不允许进行ajax请求。

  解决跨域请求:
    *允许所有其他的域向当前域发送请求。
      header("Access-Control-Allow-Origin:*");
    设置允许指定域发送请求:
      header("Access-Control-Allow-Origin:http://day7.com“);
jsonp概念:
  客户端让服务器返回数据的同时,并告诉服务器,要调用哪个函数,服务器就返回调用该函数的形式,并且数据作为该函数调用的参数。


    开启跨域请求【需要前后端配合】(错误不存在,解决数据返回的问题)
    jquery中:
      前台:
        dataType:"Jsonp";
      后台:
        请求所传递过来的函数名称:
          $callback=$_GET["callback"];
        读取函数:
          $data=file_get_countents("nav.json");
        返回调用函数的形式,在这个函数中传递前台需要的数据(拼接字符串):
          echo $callback.'('.$data.')';

    实现跨域请求:请求数据
      天然的跨域特性:
        href
        src
          利用script的标签src的天然跨域特性来实现跨域:返回值会以js语法解析
            
使用script标签的src属性的天然跨域特性:
    <script>
      function test(data){
        这里可以处理数据data
        例:console.log(data);
      }
    </script>
    目的:服务器拿数据回来,进行处理
      <script src="xx.php?callback=test"></script>


  对应服务器的代码(xx.php)
    <?php
      $callback=$_GET["callback];
      $data=某某数据;//可以是各种数据,可以来源于各种途径
      echo $callback.'('.$data.')';
    ?>


XMLHttpRequest2.0中的新特性:
  1)请求超时,自动触发:
      //设置超时时间(毫秒)
     xhr.timeout = 2000;
              xhr.ontimeout = function(){
                超时后做什么操作。
              }
  2)FormData对象:用于一次性收集form表单数据
    var formObj=document.querySelector("form表单");
    var formData=new FormData(formObj);
      //可以自由的追加参数
    formdata.append("address", "传智播客");
      //直接作为xhr.send参传递数
    xhr.send(formData);
    注:
      xhr此时只能是post请求
      不设置请求头
      formdata还可以追加数据:
        formData.append("key","value");
  3)监听文件上传进度:
    xhr.upload.onprogress = function(e) {
        //已经上传文件的大小
       var current = e.loaded;
        //要上传文件的大小
       var total = e.total;
        //根据这两个数据设置进度条的表现
       var percent = current / total * 100 + "%";
  测试大文件,需要去php.ini中修改
    post_max_size,
    upload_max_filesize


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马