JavaWeb AJAX

时间:2023-01-31 22:17:45

1、  Asynchronized JavaScript And XML

异步JavaScript和XML,它并不是一门新的语言或技术,实际是几项技术按一定的方式组合在一起共同的协作中发挥各自的作用,它包含:

  • 使用XHTML和CSS标准化呈现;
  • 使用DOM实现动态显示和交互;
  • 使用XML和XSLT进行数据交换与处理;
  • 使用XMLHttpRequest进行异步数据读取;
  • 使用JavaScript绑定和处理数据。

简单的说,AJAX是一种Web交互的新方法。

2、  包含了JS,XML,CSS,HTML,XSTL,DOM,XMLHttpRequest七种技术,AJAX把这已有的七种技术整合在一起,发挥出各个技术的优势,老技术,新思想。

3、  AJAX的特点:

  • 不需要刷新页面就可以改变页面内容,减少用户等待时间;
  • 改善表单验证方式,不需要打开新页面也不再需要将页面数据提交;
  • 按需获取数据,每次只从服务器端获取需要的数据;
  • 读取外部数据,进行数据处理整合;
  • 异步与服务器进行交互,在交互过程中用户无需等待,仍可继续操作。

4、  AJAX的工作原理:

AJAX模型在浏览器中整合了一个中间层(AJAX引擎)来处理浏览器和服务器之间的通信。传统Web交互请求和响应的都是页面,AJAX请求和响应的都是数据。

5、  AJAX应用于只需改变数据而不改变页面的场景。

6、  AJAX优势:

  • AJAX的根本理念是“按需取数据”,大大降低了数据的实际读取量;
  • 无需刷新更新页面,通过异步发送请求,避免频繁刷新页面,减少用户等待时间,给用户一种连续体验;
  • AJAX技术可以将传统的服务器工作转嫁到客户端,从而减轻服务器和带宽的负担,节约资源;
  • AJAX基于标准化技术,集合所有浏览器都支持这种技术,无需下载插件或虚拟机程序。

7、  AJAX开发五步骤:

  • 建立XMLHttpRequest对象;
  • 设置回调函数;
  • 使用open方法与服务器建立链接;
  • 向服务器端发送数据;
  • 在回调函数针对不同响应状态进行处理。

8、  XMLHttpRequest(XHR)对象,用来处理发送请求和响应,必须用JavaScript创建。IE浏览器和其他浏览器创建XHR对象方式不同,需做判断。具有如下8种属性:

onreadystatechange、readyState、responseText、responseXML、status

responseBody、responseStream、statusText

9、  readyState属性一共有5种取值:

  • 0:请求没有发出(在调用open()函数之前);
  • 1:表示请求已经建立但还没有发出(调用send()之前);
  • 2:表示请求已经发出正在处理之中(这里通常可以从响应得到内容头部);
  • 3:表示请求已经处理,正在接收服务器信息,响应中通常有部分数据可用,但服务器还未完成响应;
  • 4:响应已经完成,可以访问服务器响应并使用它。

10、          XHR对象中的方法:

  • open()将创建一个HTTP请求,并制定请求模式;
  • send()将创建的请求发送到服务器端,并接收回应信息;
  • abort() 取消发送的请求
  • getAllResponseHeaders()
  • getResponseHeader
  • setRequestHeader()

11、          jQuery AJAX主要包括对ajax(),get(),post(),load(),getScript(),getJSON()等几种常用无刷新操作方法的掌握。

  • load(url):载入远程HTML文件代码并插入DOM中,默认使用get方式,传递参数时自动转换为post方式。参数url:要载入的远程url地址;可选参数data:发给服务器的数据;可选参数callback:载入成功的回调函数;
  • get(url,[data],[callback]):使用get方式从服务器端获取数据;
  • post(url,[data],[callback]):使用post方式从服务器端获取数据;
  • getScript(url,[callback]):通过get方式请求载入并执行一个JavaScript文件;
  • getJSON(url,[data],[callback]):通过get方式获取json格式的数据。
  • ajax():jQuery封装AJAX的最底层方法,可以处理任何简单或复杂的ajax请求。该方法只有一个参数,包含配置及回调函数信息。

12、          JSON,最重要的是理解它是一种数据格式,不是一种编程语言。

一种轻量级的数据交换格式,经常用于服务器和客户端传输数据。

数据在键值对中;数据由逗号分隔;花括号保存对象;方括号保存数组;

JSON值可以是number,string””,boolean, null, array[],object{},。

var peo={name:XXX,age:XXX}

  • JSON中字符串必须使用双引号;
  • JSON对象没有申明变量,没有末尾的分号;
  • JSON数组存放的可以是不同类型的数据,而且可以和对象可以结合起来;
  • 可以把JSON数据结构解析为有用的JS对象;

13、          JS中包含一个全局对象JSON,该对象有两个方法:

stringify():用于把JS对象序列化为JSON的字符串;

parse():用于把JSON字符串解析为原生的JS值。

14、遍历对象$.each(mapName,function(key,value){

});