Ajax与jQuery


认识Ajax

Ajax Asynchronous Javascript And XML(异步 JavaScript XML),是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript  XML标准通用标记语言的子集)。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 [1] 

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

 

为什么使用Ajax

 

无刷新:不刷新整个页面,只刷新局部

 

无刷新的好处

只更新部分页面,有效利用带宽

提供连续的用户体验

提供类似C/S的交互效果,操作更方便

 

传统WebAjax的差异

差异

方式

      

发送请求方式不同

传统Web

浏览器发送同步请求

Ajax技术

异步引擎对象发送请求

服务器响应不同

传统Web

响应内容是一个完整页面

Ajax技术

响应内容只是需要的数据

客户端处理方式不同

传统Web

需等待服务器响应完成并重新加载整个页面后用户才能进行操作

Ajax技术

可以动态更新页面中的部分内容

不影响用户在页面进行其他操作

 

Ajax工作流程

 

 

XMLHttpRequest

整个Ajax技术的核心

提供异步发送请求的能力

常用方法

     

      

open( String method,  String url, 

           boolean async,  String user, 

           String password ) 

创建一个新的HTTP请求

send( String  data )

发送请求到服务器端

abort( )

取消当前请求

setRequestHeader( 

           String header,  String value ) 

设置请求的某个HTTP头信息

getResponseHeader(String header)

获取响应的指定HTTP头信息

getAllResponseHeader( )

获取响应的所有HTTP头信息

 

事件

onreadystatechange:指定回调函数

常用属性

readyStateXMLHttpRequest的状态信息

就绪状态码

      

0

XMLHttpRequest对象未完成初始化

1

XMLHttpRequest对象开始发送请求

2

XMLHttpRequest对象的请求发送完成

3

XMLHttpRequest对象开始读取响应

4

XMLHttpRequest对象读取响应结束

 

常用属性

statusHTTP的状态码

状态码

      

200

服务器正确返回响应

404

请求的资源不存在

500

服务器内部错误

403

没有访问权限

注:就绪状态是4 且状态码是200,表示正确完成

 

statusText:返回当前请求的响应状态

responseText:以文本形式获得响应的内容

responseXML:将XML格式的响应内容解析成  DOM对象返回

 

 

使用Ajax发送GET请求及处理相应

 

使用XMLHttpRequest对象发送GET请求到服务器端,并处理文本式相应的步骤

1、创建XMLHttoRequest对象

2、设置回调函数

3、初始化XMLHttoRequest对象

4、发送请求

例如:


 

使用Ajax发送POST请求及处理相应

 


 

 

 GET请求和POST请求的区别

 

  

请求方式

      

初始化组件

GET

xmlHttpRequest.open( "GET", url, true );

POST

xmlHttpRequest.open( "POST", url, true );

xmlHttpRequest

  .setRequestHeader( "Content-Type",

   "application/x-www-form-urlencoded" );

发送请求

GET

xmlHttpRequest.send( null );

POST

xmlHttpRequest.send(

              "key=xxx&type=12&year=2016" );

 

使用jQuery实现Ajax

 

传统方式实现Ajax的不足

步骤繁琐

方法、属性、常用值较多不好记忆

处理复杂结构的响应数据(如XML格式)比较烦琐

浏览器兼容问题

 

注:jQueryAjax相关操作都进行了封装

 

$.ajax()简介

 

语法:

$.ajax([settubgs]);

常用属性参数

 

  

  

      

url

String

发送请求的地址,默认为当前页地址

type

String

请求方式,默认为GET

data

PlainObject

 String

 Array

发送到服务器的数据

dataType

String

预期服务器返回的数据类型,包括:XMLHTMLScriptJSONJSONPtext

timeout

Number

设置请求超时时间

global

Boolean

表示是否触发全局Ajax事件,默认为true

 

 

常用函数参数

 

  

      

      

beforeSend

Function ( jqXHR  jqxhr,

        PlainObject  settings )

发送请求前调用的函数

success

Function( 任意类型  result,

        String  textStatus,

        jqXHR  jqxhr )

请求成功后调用的函数

参数result:可选,由服务器返回的数据

error

Function ( jqXHR  jqxhr, 

        String  textStatus, 

        String  errorThrown )

请求失败时调用的函数

complete

Function ( jqXHR  jqxhr,

        String textStatus )

请求完成后(无论成功还是失败)调用的函数

 

使用$.ajax()发送异步请求

 

例如:

$.ajax( {

     "url"         :  "url",                      // 要提交的URL路径

     "type"        :  "get",                     // 发送请求的方式

     "data"        :  data,                      // 要发送到服务器的数据

     "dataType"     :  "text",                   // 指定传输的数据格式

     "success"      :  function(result) { // 请求成功后要执行的代码

     },

      "error"       :  function() {           // 请求失败后要执行的代码

     }

} );

 

 

认识JSON

 

JSONJavaScript  Object  Notation

一种轻量级的数据交换格式

采用独立于语言的文本格式

通常用于在客户端和服务器之间传递数据

JSON的优点

轻量级交互语言

结构简单

易于解析

 

定义JSON对象

语法:var JSON对象 = { "name" : value,  "name" : value,  …… };

例如:

var person = { "name" : "张三",   "age" : 30,  "spouse" : null };

 

定义JSON数组

语法:var JSON数组 = [ value,  value,  …… ];

例如:

var countryArray = [ "中国",  "美国",  "俄罗斯" ];

var personArray = [ { "name":"张三",  "age":30 },

                { "name":"李四",  "age":40 } ];

 

访问JSON数组

$( JSON数组 ).each( function() { this.name } );

 

 

 

 

 

你可能感兴趣的:(Ajax与jQuery)