Ajax

2018-06-24 01:10:57来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

-------------------------------------------------------------------------get-----------------------------------------------------------------------------------
1.通过get来获取数据;
  Js 部分:

      

 


// 2、准备发送
    

 


// 3、执行发送动作

      

// 4、指定回调函数

      

 

php部分:
      

 

--------------------------------------------------------------------------post-----------------------------------------------------------------------------------
2. 通过post来获取数据:


  js部分:
    

 

// 2、准备发送


    

 


// 3、执行发送动作

    

 



// 4、指定回调函数


    

 


php部分:


    

 



--------------------------------------------------------------------------Ajax--------------------------------------------------------------------------------
Ajax:
  全称:Asynchronous JavaScript and XML(异步的js和XML)
  用途:通过JS语言向服务器请求数据。
  如何理解ajax?
  回答:js向服务器请求数据,实现异步请求,局部刷新。

XMLHttpRequest对象的方法:
  Ajax一旦用send方法发出HTTP请求之后,当readyState为4的时候,就会有一个属性产生 --- xhr.status


Xhr . readyState : 向服务器发送请求状态,就绪状态
    存有 XMLHttpRequest 请求的当前状态。从 0 到 4 发生变化。
    ? 0: 请求未初始化
    ? 1: 服务器连接已建立 XMLHttpRequest对象正在加载
    ? 2: 请求已接收 XMLHttpRequest对象加载完毕
    ? 3: 请求解析处理中 正在传输数据
    ? 4: 请求已完成,服务器的响应已就绪 全部完成


Xhr . onreadystatechange : 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数;


xhr.status : 服务器对请求的反馈
      ? 200 数据相应正常
      ? 404 没有找到资源
      ? 500 服务器端错误


xhr . responseText : 服务器输出返回的数据;


xhr . responseXML:接受从服务器传进来的XML类型的数据;

get请求参数获取
   1. http协议的常用请求方式:(增删改查)
    a、get 用来从服务器获取数据(参数一般作为查询条件)
    b、post 用来添加数据
    c、put 用来修改数据
    d、delete 用来删除数据

     2. $_GET['abc']得到url地址中传递的参数的值

     3. $_GET是PHP内置好的专门用来接数据用的一个全局数组

          4. 注意:绝不能使用 GET 来发送密码或其他敏感信息

 

post请求参数获取
  1. form 默认请求方式就是get请求,get请求会把表单数据作为url的参数进行提交
  2. 设置服务响应的文件类型:
    1. header("Content-Type: text/plain; charset=utf-8");
     2. header("Content-Type: text/html; charset=utf-8");

  3. $_POST也是PHP内置好的专门用来接数据用的一个全局数组
    GET和POST请求方式的差异:
      1. GET没有请求主体,使用xhr.send(null)
      2. GET可以通过在请求URL上添加请求参数
      3. POST有请求主体,可以通过xhr.send('name=itcast&age=10')
      4. POST需要设置请求头
      5. GET效率更好(应用多)
      6. GET大小限制约4K,POST则没有限制
ajax请求:
  $( document ).ajaxStart( ) : 在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。

    $( document ).ajaxStart(function () {
      $( '.ajaxStart' ).append( '<span>start</span><br />' );
    });


$( document ).ajaxSend( ) :规定当请求开始时执行函数;
  $( document ).ajaxSend(function () {
    $( '.ajaxSend' ).append( '<span>send</span><br />' );
  });


$( document ).ajaxSuccess():在 AJAX 请求成功时执行函数;
  $( document ).ajaxSuccess(function () {
    $( '.ajaxSuccess' ).append( '<span>success</span><br />' );
   });


$( document ).ajaxErro():在 AJAX 请求发生错误时执行函数;
  $( document ).ajaxError(function () {
    $( '.ajaxError' ).append( '<span>error</span><br />' );
  });


$( document ).ajaxComplete():规定当请求完成时运行的函数;
  $( document ).ajaxComplete(function () {
    $( '.ajaxComplete' ).append( '<span>complete</span><br />' );
  });


$( document ).ajaxStop():规定AJAX 请求结束时执行函数;
  $( document ).ajaxStop(function () {
    $( '.ajaxStop' ).append( '<span>stop</span><br />' );
  });

 


Php-后台接口
  如何更好的理解接口这个概念
  接口说白了就是后台返回特定格式数据,而不是一个完整的页面,就是从后台到前台返回一些数据;

知识案例:
  案例1:
判断数组中没有对应键【array_key_exists】:
        

 


array_key_exists(要查找的键,数组): 判断数组中没有对应键

 


案例2:
      

 



案例3:
    

 


  //attr指的是【键】username、password;
  //defaults.data[attr]指的是【值】'张三'、'123';


在服务器后台数据中,返回到前端的数据都是字符串, 简单数据类型用echo输出, 复杂数据类型例如数组,对象等 用 json_encode( ) 来转换;
注意:服务器端返回的数据必须是字符串类型,而浏览器端接收的数据也是字符串类型。


  服务器传到前端的数据 转换为字符串:
    json_encode( ) --- 将数组和对象转换为字符串的方法;
    json_decode( )--- 将字符串转换为对象的方法;
  前端接受服务器数据,将数据转换为对象,以便使用:
    JSON_parse( ) --- 把json形式的字符串转成对象;
    JSON_stringify( ) --- 把对象转成字符串;
    eval( ) --- 把字符串解析成JS代码并执行;

---------------------------------------------------------------------------XML------------------------------------------------------------------------------------

什么是XML
  1、XML指可扩展的标记语言
  2、主要用来输出和存储数据 --- 注意:设置宗旨是【传输数据】,而非显示数据
  3、XML标签没有预定义,需要自行定义标签 --- 就是说XML具有自我描述性

XML 数据格式的缺点
  1、元数据占用的数据量比较大,不利于大量数据的网络传输
  2、解析不太方便

XML和HTML的区别
  1、XML是用来传输和存储数据的,而HTML被设计是用来显示数据的
  2、XML旨在传输数据,HTML旨在显示信息
  object后面的原型在不在前面的原型链上


XML的树结构
  1、XML 文档形成了的也是一种“树结构”;
  2、【XML文档必须包含根元素】该元素是所有其他元素的父元素。树结构从根部开始,扩展到最低端;

XML的语法
  1、所有XML元素都必须都闭合标签
  2、XML标签对大小写敏感,因此必须使用相同的大小写来编写打开标签和关闭标签
  3、XML必须正确地嵌套
  4、XML 文档必须有根元素
  5、XML 的属性值须加引号
  6、XML 中的注释 --- \<!-- … -->
  7、在 XML 中,空格会被保留
  8、一些特殊符号需要用实体引用

---------------------------------------------------------------------------JSON-----------------------------------------------------------------------------------

什么是JSON
  JavaScript 对象表示法
  是存储和交换文本信息的语法
  轻量级的文本数据交换格式

JSON数据和普通的JS兑现的区别
  json 对象没有变量名
  json 形式的数据结尾没有分号
  json 数据中的键必须用双引号包括

JSON和XML对比
  JSON 比 XML 更小、更快,更易解析

json数据解析:
  把JSON文本转换为JavaScript对象

    JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。


  
为什么要转换

      在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键;

  
转换的方法
   
 JSON_parse( ) --- 把json形式的字符串转成对象
    JSON_stringify( ) --- 把对象转成字符串
    eval( ) --- 把字符串解析成JS代码并执行(有安全隐患) var d = eval("(" + data + ")"); 加双引号
    xhr.responseXML:返回XML格式数据。(不常用)
    xhr.responseText:返回字符串格式数据。

---------------------------------------------------------------------------jQuery-ajax--------------------------------------------------------------------------------

jQuery-ajax相关API基本使用:
      

 


jQuery-ajax属性:
  type:通过什么方式获取;
  url :数据请求地址;
  data : 发送到服务器的数据。将自动转换为请求字符串格式;
  dataType : 服务器返回的数据类型:
      § "xml": 返回 XML 文档,可用 jQuery 处理。
      § "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
      § "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
      § "json": 返回 JSON 数据 。
      § "jsonp": JSONP格式。使用JSONP形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
      § "text": 返回纯文本字符串
  success : 请求成功后的回调函数。
  error : 请求失败时调用此函数。一般是获取后端数据出现错误就会调用此函数;

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

下一篇:一个简单的 PC端与移动端的适配(通过UA)