博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax笔记
阅读量:4879 次
发布时间:2019-06-11

本文共 3743 字,大约阅读时间需要 12 分钟。

什么是AJAX?

AJAX:”Asynchronous JavaScript and XML”

中文意思:异步JavaScript和XML。

指一种创建交互式网页应用的网页开发技术。

AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。

不是指一种单一的技术,而是有机地利用了一系列相关的技术:

web标准( Standards-Based Presentation )XHTML+CSS的表示,

使用 DOM( Document Object Model )进行动态显示及交互,

使用 XML 和 XSLT 进行数据交换及相关操作,

使用 XMLHttpRequest 进行异步数据查询、检索.

简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合.

那,什么是交互式?

普通的网页请求回执过程

 

 

AJAX优点

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。

这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。

AJAX应用可以仅向服务器发送并取回必需的数据,并在客户端采用JavaScript处理来自服务器的响应

因为在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%),结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据,这使得Web应用程序更为迅捷地响应用户交互,并避免了在网路上发送那些没有改变的信息。

AJAX优点

Ajax在本质上是一个浏览器端的技术

Ajax技术之主要目的在于局部交换客户端及服务器间之数据

这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)

与服务器之间的沟通,完全是透过Javascript 来实行

使用XMLHttpRequest 本身传送的资料量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序

AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦

XMLHttpRequest对象

接着介绍XMLHttpRequest对象,因为Ajax应用程序的中心就是它。同时,对于许多数网页开发的实际问题中,它也是最广泛适用的解决方案。

我们还将介绍该对象的GET和POST方法的使用。同时探讨用户使用此对象常见的错误,例如当试图让页面在所有服务器上都能运行时遇到的一些问题。

 

XMLHttpRequest对象最初是作为IE5中的一个ActiveX控件出现的,随后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都将它纳入自身。

XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

XMLHttpRequest对象的作用在于,允许用脚本程序通过HTTP连接到服务器,而不是通过HTTP请求响应模型与服务器通信

。 简而言之:它可以异步从服务器端获取txt或者xml数据

创建XMLHttpRequest对象

同步使用XMLHttpRequest对象

按照下面模式,可以同步地XMLHttpRequest对象:

创建对象; - new (叫助手过来)

创建请求; - open (告诉他要去做的事情)

发送请求; - send (去吧)

一、先来创建XMLHttpRequest对象

在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为:

var xhr = new XMLHttpRequest();

在IE5/6中代码为:

var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

注意,JavaScript区分大小写。

 

function createXmlHttp() {
//创建xhr对象 var xhobj = false; try { xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+ } catch (e) { try { xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6 } catch (e2) { xhobj = false; } } if (!xhobj && typeof XMLHttpRequest != 'undefined') {
// Firefox, Opera 8.0+, Safari xhobj = new XMLHttpRequest(); } return xhobj; }

创建XMLHttpRequest对象

XMLHttpRequest对象的方法

                方法                               说明

     abort                                       取消请求

    open                          需要使用多个参数,第一个设置方法属性,第二个设置目标URL,第                                        三个指定是同步(false)还是异步(true)发送请求

send                              发送请求到服务器

setRequestHeader           添加自定义Http头到请求

getAllResponseHeaders    获取HTTP响应头的整个列表

 

getResponseHeader          仅获取指定的HTTP响应头

 

创建XMLHttpRequest对象

二、为XMLHttpRequest对象设置请求参数 1.设置参数: xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true); 2.POST方式:xhr.open("POST", "GetAreasByAjax.aspx", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 3.设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");

三、发送请求:(分别对应GET和POST) xhr.send(null);//GET方式 xhr.send("isAjax=1&na=123");//POST方式

 

是不是少了什么?请求发送出去后会有响应回来,那我怎么知道请求已经返回了呢?

 

function createXmlHttp() {
//创建xhr对象 var xhobj = false; try { xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+ } catch (e) { try { xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6 } catch (e2) { xhobj = false; } } if (!xhobj && typeof XMLHttpRequest != 'undefined') {
// Firefox, Opera 8.0+, Safari xhobj = new XMLHttpRequest(); } return xhobj; }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/fanhongshuo/p/3818966.html

你可能感兴趣的文章
bzoj 1670: [Usaco2006 Oct]Building the Moat护城河的挖掘
查看>>
bzoj 2281: [Sdoi2011]黑白棋
查看>>
bzoj 4475: [Jsoi2015]子集选取
查看>>
团队开发7
查看>>
java之静态代理与动态代理
查看>>
软件测试2019:第四次作业
查看>>
201571030335 + 小学四则运算练习软件项目报告
查看>>
jsp分页功能
查看>>
HWND_BROADCAST的一个用法——修改环境变量,立即通知系统
查看>>
数组对象按字母顺序或数字大小排序
查看>>
IDEA maven设置配置
查看>>
数据库原理基础总结
查看>>
springMVC(注解版笔记)
查看>>
异步Socket 客户端部分
查看>>
在js中添加HTML类样式
查看>>
Operating System Internals and Design Principle - chapter 9、10
查看>>
bzoj 1053 [ HAOI 2007 ] 反素数ant ——暴搜
查看>>
《BUG创造队》作业8:软件测试与Alpha冲刺(第二天)
查看>>
win10 Kinect2 Visualstudio2015 opencv3环境搭建
查看>>
微星P55-主板是怎样造出来的
查看>>