Ajax基础(小猫)

Ajax

1.什么是Ajax: 不用刷新整个页面便可与服务器通讯的办法

2.Ajax的基本使用

2.1XMLHttpRequest

XMLHttpRequest对象
  XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

2.2方法的使用

l 利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分:

l onreadystatechange 事件处理函数

l open 方法

l send 方法

2.2.1Open方法

l 发送请求--方法和属性介绍

l open(method, url, asynch)

l XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求

l method:请求类型,类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。

l 在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,这就会带来不好的结果。把当前时间戳追加到URL的最后,就能确保URL的惟一性,从而避免浏览器缓存结果。

l url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

l asynch:表示请求是否要异步传输,默认值为true(异步)。指定true,在读取后面的脚本之前,不需要等待服务器的相应。指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。

2.2.2Send方法

l 发送请求--方法和属性介绍

l send(data):

l open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令

l data:将要传递给服务器的字符串。

若选用的是 GET 请求,则不会发送任何数据, 给 send 方法传递 null 即可:request.send(null);

l 当向send()方法提供参数时,要确保open()中指定的方法是POST,如果没有数据作为请求体的一部分发送,则使用null.

完整的 Ajax GET 请求示例:

2.2.3onreadystatechange

l onreadystatechange:

l 该事件处理函数由服务器触发,而不是用户

l 在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange事件

Ajax请求对象的状态码readyState 和 服务器返回的状态码status

readyState

l readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

l 0 代表未初始化。 还没有调用 open 方法

l 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用

l 2 代表已加载完毕。send 已被调用。请求已经开始

l 3 代表交互中。服务器正在发送响应

4 代表完成。响应发送完毕

每次 readyState 值的改变,都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数,那么每次 readyState 值的改变都会引发该函数的执行。

l readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4

status

l 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。

l 常用状态码及其含义:

l 404 没找到页面(not found)

l 403 禁止访问(forbidden)

l 500 内部服务器出错(internal service error)

l 200 一切正常(ok)

l 304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 304 比较,可以确保服务器是否已发送了一个成功的响应

2.3返回数据

responseText

l XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。

l 当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。

responseXML

l 如果服务器返回的是 XML, 那么数据将储存在 responseXML 属性中。

l 只用服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml

时间: 2024-08-27 06:54:44

Ajax基础(小猫)的相关文章

【javascript】ajax 基础 --本文转载

[javascript]ajax 基础 什么是 ajax ajax 即"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 a

基于JS的DOM 编程基础和Json语法及JS下的AJAX基础

1.在dom编程中:     注意:使用dom操作一般在页面完全载入之后,一般在window_onload事件里操作dom nodeName  表示节点的名称如:<input   type= "button"  value="确定" />    此时nodeName=“input” ; nodeValue  表示节点的值如<p>aaa</p> 此时的nodeValue="aaa",而nodeName="

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

AJAX 基础知识

AJAX 基础知识 一.AJAX综述 1.AJAX的概念 A:异步asynchronousJ:JavaScriptA:andX:XML 异步的JavaScript和XML. 2.AJAX的优点(好处) 1),提高用户体验度  2),JS与服务端的交互  3),页面局部刷新--提高浏览器的效率 2.AJAX的缺点(弊端)    加大服务器的负担 注:新思想,老技术. 二.实现AJAX功能 (一).JS实现AJAX功能 1.获得XMLHttpRequest(浏览器的兼容) (二).JQuery实现A

Ajax基础知识 浅析(含php基础语法知识)

1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo "<div>Hello World!</div>"; ?> (2) $  变量声明  如果只声明不赋值,会报错 <?php $num=123; echo $num; echo "<div>编号为:".$num."&l

【Java EE 学习第31天】【JavaScript基础增强】【Ajax基础】【Json基础】

一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使用,所以不推荐使用,最好使用open方法弹窗. (2)open方法. (3)open方法弹窗实例. Base.html文档: <!DOCTYPE html> <html> <head> <title>Base.html</title> <met

ajax 基础实例

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 优点:使用ajax读取数据文件,不需要刷新页面就能取出文件数据<br><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

text3——ajax基础

                                          XMLHttpRequest这个对象的属性 onreadystatechange 每次状态改变所触发事件的事件处理程序. responseText 从服务器进程返回数据的字符串形式. responseXML 从服务器进程返回的DOM兼容的文档数据对象. status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪) status Text 伴随状态码的字符串信息 readyState 对象状态

Ajax基础2

什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 动态数据,请求js或(json)文件 eval的使用 DOM创建元素 局部刷新,请求并显示部分网页文件 Ajax原理 http请求方法 function ajax(url, fnSucc, fnFaild) { //1.创建Ajax对象 var oAjax=null; if(window.XMLH

ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 如果此页面用到了ajax方法,一定要在页面上端加上: <script src="../../jquery-1.11.2.min.js"></script> ajax基础语法: <script type="text/javascript">