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

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

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

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

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

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

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

AJAX优点

lAjax在本质上是一个浏览器端的技术
lAjax技术之主要目的在于局部交换客户端及服务器间之数据
l这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)
l与服务器之间的沟通,完全是透过Javascript 来实行
l使用XMLHttpRequest 本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序
lAJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦

1.GET方式

1.1设置参数

xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);

1.2GET方式请求可以设置浏览器不使用缓存
xhr.setRequestHeader("If-Modified-Since",
"0");

1.3发送: xhr.send(null);//GET方式

2.POST方式:
       1.1设置参数:xhr.open("POST", "GetAreasByAjax.aspx", true);
       1.2添加请求头:xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

1.3发送:xhr.send("isAjax=1&na=123");//POST方式

异步使用XMLHttpRequest对象

异步使用XMLHttpRequest对象时,必须使用:onreadystatechange事件。

使用模式应该是:

1.创建该对象;-new
2.设置readystatechange事件触发一个回调函数; -onreadystatechagne
3.打开请求;-open
4.发送请求;-send

注:在回调函数中检查readyState属性,看数据是否准备就绪(是否等于4)。

u如果没有准备好,隔一段时间再次检查。因为数据没有下载完时,我们无法使用它的属性和方法。
u如果已经准备好,就继续往下执行;
lreadyState属性

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

•0:未初始化。对象已经创建,但还未初始化,即还没调用open方法;
•1:已打开。对象已经创建并初始化,但还未调用send方法;
•2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
•3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
•4:已加载。所有数据接收完毕
lAJAX请求服务器时如果服务器出错了怎么办?
l编程常见错误
•XMLHttpRequest大小写不正确;
•多写了对圆括号:

正确:xHRObject.onreadystatechange =getData;

错误:xHRObject.onreadystatechange =getData();

必须弄清楚,在JavaScript中:

•函数名后如果有圆括号,意思就是将函数的返回值赋给等号左边的变量;
•没有圆括号,是将函数本身赋给等号前的变量。
 

什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。的更多相关文章

  1. AJAX—AJAX基础

    AJAX简介 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异 ...

  2. Ajax(Asynchronous JavaScript )and xml

    JavaScript的两种任务执行模式--同步(synchronous)和异步(Asynchronous) 同步模式 JavaScript的执行环境是单线程的,意味着一次只能执行一个任务,如果有多个任 ...

  3. AJAX(Asynchronous JavaScript And XML)

    AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...

  4. Ajax技术 - (Asynchronous JavaScript + XML)

    Ajax Ajax = 异步JavaScript和XML,Ajax是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新.可以再网页不重新加载的情况下, ...

  5. 【JavaScript】AJAX总结(异步JavaScript和XML)

    AJAX介绍 通过 AJAX,你可以创建更好.更快以及更友好的 WEB 应用程序. AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象. AJAX 应用程 ...

  6. HtmlUnit爬取Ajax动态生成的网页以及自动调用页面javascript函数

    HtmlUnit官网的介绍: HtmlUnit是一款基于Java的没有图形界面的浏览器程序.它模仿HTML document并且提供API让开发人员像是在一个正常的浏览器上操作一样,获取网页内容,填充 ...

  7. ajax 异步请求webservice(XML格式)

    function callAjaxWebservice(){ alert("call ajax"); try { $.ajax({ type: "POST", ...

  8. ajax异步 —— javascript

    目录 ajax是什么 原生ajax jquery ajax ajax跨域 ajax是什么 作用:不必重新加载整个页面,更新部分页面内容. 大概使用过程:通过后台提供的数据接口,ajax获取数据,动态修 ...

  9. How to make an HTTP request 异步 JavaScript 和 XML

    https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started In order to make an HTTP request to th ...

  10. Ajax在jQuery中的应用---加载异步数据

    Ajax是Asynchronous JavaScript and XML的缩写,其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从 ...

随机推荐

  1. C#在自定义事件里传递自定义数据,使用EventArgs的姿势

    EventArgs是包含事件数据的类的基类,用于传递事件的细节.今天分享的是使用泛型来约束EventArgs,在事件里传递自定义数据的例子. 正题 由于这个关注点很小,直接上代码了. 定义泛型类TEv ...

  2. 实践作业2:黑盒测试实践——小组任务分工 Day 1

    今日教学实验任务分配后,课下小组例会完成任务分工,具体分工如下: (1)系统需求分析--刘思佳 (2)设计测试用例--王俊杰 (3)编写.运行测试脚本--郜昌磊 (4)记录测试过程--吴慧杰 (5)记 ...

  3. PHP扩展代码结构详解

    PHP扩展代码结构详解: 这个是继:使用ext_skel和phpize构建php5扩展  内容 (拆分出来) Zend_API:深入_PHP_内核:http://cn2.php.net/manual/ ...

  4. 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇

    作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...

  5. Codeforces Round #436 (Div. 2)

    http://codeforces.com/contest/864 第一次打cf的月赛-- A 题意:给你一个数列,问你能不能保证里面只有两种数且个数相等.2<=n<=100,1<= ...

  6. 【Java入门提高篇】Day9 Java内部类——静态内部类

    今天来说说Java中的最后一种内部类--静态内部类 所谓的静态内部类,自然就是用static修饰的内部类,那用static修饰过后的内部类,跟一般的内部类相比有什么特别的地方呢? 首先,它是静态的,这 ...

  7. Python爬虫(十八)_多线程糗事百科案例

    多线程糗事百科案例 案例要求参考上一个糗事百科单进程案例:http://www.cnblogs.com/miqi1992/p/8081929.html Queue(队列对象) Queue是python ...

  8. 剑指Offer——当当+搜狐+好未来笔试题+知识点总结

    剑指Offer--当当+搜狐+好未来笔试题+知识点总结 情景回想 时间:2016.9.21 15:00-21:00 地点:山东省网络环境智能计算技术重点实验室 事件:当当笔试.搜狐笔试.好未来笔试 3 ...

  9. 通过ssh訪问NAT网络模式虚拟机里的Linux

    进入 GuestOS : #/sbin/ifconfig 查看 inet addr : 10.0.2.15 然后到 HostOS 去, 看控制面板, 看网络和共享中心的VirtualBox Host- ...

  10. Vue深度学习(5)-过渡效果

    简介 通过 Vue.js 的过渡系统,你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果.Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果,你也可以提供相应 ...