澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

澳门官方游戏网站:Ajax

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

Ajax

      澳门官方游戏网站 1

 

 

Ajax请求
jQuery.ajax(options)

// 2、准备发送
    澳门官方游戏网站 2

说明:通过 HTTP 请求加载远程数据。

 

$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

// 3、执行发送动作

注意: 如果你指定了dataType选项,请确保服务器返回正确的MIME信息,(如xml返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。

      澳门官方游戏网站 3

$.ajax()只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。

// 4、指定回调函数

1.2 中可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。使用JSON 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换?为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

      澳门官方游戏网站 4

 

 

选项

php部分:
      澳门官方游戏网站 5

async(Boolean):(默认: true)所有请求均为异步请求。如要发送同步请求,设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

 

beforeSend(Function):发送请求前可修改XMLHttpRequest对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

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

cache(Boolean):(默认: true) 设置为fals 将不会从浏览器缓存中加载请求信息。

  js部分:
    澳门官方游戏网站 6

complete(Function): 请求完成后回调函数(请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。

 

contentType(String): (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

// 2、准备发送

data(Object,String): 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

    澳门官方游戏网站 7

dataType(String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

 

"xml": 返回 XML 文档,可用 jQuery 处理。

// 3、执行发送动作

"html": 返回纯文本 HTML 信息;包含 script 元素。

    澳门官方游戏网站 8

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

 

"json": 返回 JSON 数据 。

// 4、指定回调函数

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    澳门官方游戏网站 9

error(Function) : (默认:自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

 

global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的Ajax事件。

php部分:

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

    澳门官方游戏网站 10

processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

澳门官方游戏网站, 

success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。

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

timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

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

type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

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

url (String) : (默认: 当前页地址) 发送请求的地址。

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

 

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

加载并执行一个 JS 文件。

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

$.ajax({

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

 type: "GET",

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

 url: "test.js",

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

 dataType: "script"

     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");

$.ajax({

  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 事件。

   type: "POST",

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

   url: "some.php",

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

   data: "name=John&location=Boston",

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

   success: function(msg){

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

     alert( "Data Saved: " + msg );

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

   }

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

});

 

 

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

装入一个 HTML 网页最新版本。

知识案例:
  案例1:
判断数组中没有对应键【array_key_exists】:
        澳门官方游戏网站 11

$.ajax({

 

 url: "test.html",

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

 cache: false,

 

 success: function(html){

案例2:
      澳门官方游戏网站 12

    $("#results").append(html);

 

 }

案例3:
    澳门官方游戏网站 13

});

 

 

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

同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

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

 var html = $.ajax({

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

 url: "some.php",

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

 async: false

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

 }).responseText;

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

 

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

发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。

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

 var xmlDocument = [create xml document];

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

 $.ajax({

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

   url: "page.php",

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

   processData: false,

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

   data: xmlDocument,

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

   success: handleResponse

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

 });

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

 

*
  *为什么要转换

load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中,默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

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

url (String) : 请求的HTML页的URL地址。

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

data (Map) : (可选参数) 发送至服务器的 key/value 数据。如果有[data]参数,就会自动转换为POST方式。

---------------------------------------------------------------------------jQuery-ajax--------------------------------------------------------------------------------*

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

jQuery-ajax相关API基本使用:
      澳门官方游戏网站 14

 

 

示例代码:

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 : 请求失败时调用此函数。一般是获取后端数据出现错误就会调用此函数;

$(".ajax.load").load("",

         function (responseText, textStatus, XMLHttpRequest){

         this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]

         //alert(responseText);//请求返回的内容

         //alert(textStatus);//请求状态:success,error

         //alert(XMLHttpRequest);//XMLHttpRequest对象

});

注:不知道为什么URL写绝对路径在FF下会出错。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。

 

<b>jQuery Links:</b><ul id="links"></ul>

代码:$("#links").load("/Main_Page #p-Getting-Started li");

 

代码:加载 feeds.html 文件内容。

$("#feeds").load("feeds.html");

 

代码:以 POST 形式发送附加参数并在成功时显示信息。

 $("#feeds").load("feeds.php", {limit: 25}, function(){

   alert("The last 25 entries in the feed have been loaded");

 });

 

jQuery.get(url,[data],[callback]):通过远程 HTTP GET 请求载入信息

示例代码:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

         //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

         this; // 在这里this指向的是Ajax请求的选项配置信息

         alert(data);

         //alert(textStatus);//请求状态:success,error等等。当然这里捕捉不到error,因为error的时候根本不会运行该回调函数

         //alert(this);

});

 

请求 test.php 网页,忽略返回值。 $.get("test.php");

$.get("test.php", { name: "John", time: "2pm" } );

 

显示 test.php 返回值(HTML 或 XML,取决于返回值)。

$.get("test.php", function(data){

 alert("Data Loaded: " + data);

});

 

显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:澳门官方游戏网站:Ajax

相关阅读