黑马程序员技术交流社区

标题: ajax [打印本页]

作者: 游运连 时间: 2019-6-12 16:01
标题: ajax
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

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

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