AJAX介绍

通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。

AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象。

AJAX 应用程序独立于浏览器和平台,是浏览器端技术非服务器端.

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

它可以实现在不重载页面的情况下, 比如:用户名注册检测、动态load或创建某块内容。

AJAX 使用 Http 请求

传统的HTTP请求,是每当用户提交输入后服务器都会返回一张新的页面,可有时我们需要的只是更新部分页面.

XMLHttpRequest对象:

通过使用 XMLHttpRequest 对象,web 开发者可以做到在页面已加载后从服务器更新页面!

用户可以停留在同一个页面,他不会注意到脚本在后台请求过页面,或向服务器发送过数据。 服务器处理完后会回传结果然后更新页面。

基础语法

var xmlHttp;
function createXmlHttp() {
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}//使用ActiveXObject,其他浏览器使用XMLHttpRequest内建对象

XMLHttpRequest对象三个属性

onreadystatechange 属性

存有处理服务器响应的函数xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 }

readyState 属性

存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange后面的函数就会被执行。

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

	xmlHttp.onreadystatechange = function() {
//服务器的HTTP状态码==200即响应成功
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
// 从服务器的response获得数据
alert(xmlHttp.responseText);
} else{ document.getElementById(“div1”).innerHTML=“<img src=‘loadding.gif’/>”
}
}

向服务器发送一个请求

要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。

open() 方法:

第一个参数定义发送请求所使用的方法(GET 还是 POST)。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。

send() 方法:

可将请求送往服务器。如:

	xmlHttp.open("GET","time.jsp?username=tom",true);
xmlHttp.send(null);

完整代码 (校验用户名唯一性)

//校验用户名唯一性
function NameOnly(){
// alert(1);
createXmlHttp();
var username = document.getElementById("username").value;
var url = "http://192.168.8.4:8080/reg.jsp?username=" + username + "&date=" + new Date();
//当对象的状态发生改变,就执行一次回调函数
//alert(22);
//alert(url);
xmlHttp.onreadystatechange = function(){
// alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4) {//代表服务器已经处理完该请求
// alert(xmlHttp.status);
// if(xmlHttp.status==200 || xmlHttp.status==0) {//状态码==200 代表状态码是正常的(404 500不正常)
//如果在本地运行(如:C:\\ajax\\ helloworld.htm),那么status属性不管是在”成功”还是”页面未找到”的情况下,都返回的是0。
//也就是说没有通过Web服务器形式的Ajax请求返回值都是0;
// alert(22);
var msg = xmlHttp.responseText; //获取服务器端的响应文本
if(msg==1){alert("被注册!!");}
else alert("该账号可以注册");
xmlHttp.responseXml();//如果服务器端返回的是xml文档
// }
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

【JavaScript】AJAX总结(异步JavaScript和XML)的更多相关文章

  1. 什么是 ajax?----异步 javascript 和 xml

    GET 用于请求服务器数据 POST 用于上传数据到服务器,或者修改服务器数据 ajax 异步通信,实现页面的局部刷新,按需获取数据,节约带宽,带来更好的用户体验 客户端与服务器在不必刷新浏览器的情况 ...

  2. jquery与服务器交换数据的利器--ajax(异步javascript and xml)

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 一.下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载 ...

  3. jquery和Ajax(异步js和XML)的应用

    Ajax不是值一种单一的技术,而是有机的利用了一系列的交互式网页应用相关的技术所形成的的结合体.它的出现,解开了无刷新更新网页的新时代,并代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势,是w ...

  4. Ajax(Asynchronous JavaScript )and xml

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

  5. 原生javascript Ajax

    代码 1. IE5 ,IE6 使用ActiveXObject对象,   其余现代浏览器都支持XMLHttpRequest对象: function ajaxObject(){ var xmlhttp; ...

  6. javascript——ajax应用

    概念 AJAX 指异步JavaScript及XML(Asynchronous JavaScript And XML).Ajax的核心是JavaScript对象XmlHttpRequest.XmlHtt ...

  7. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  8. 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 ...

  9. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

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

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

随机推荐

  1. OpenGl从零开始之坐标变换(上)

    坐标变换是深入理解三维世界的基础,非常重要.学习这部分首先要清楚几个概念:视点变换.模型变换.投影变换.视口变换. 在现实世界中,所有的物体都具有三维特征,但计算机本身只能处理数字,显示二维的图形,因 ...

  2. 转-sketch技巧

    10个帮你UI设计提速的Sketch使用技巧 2015-4-11 09:59| 发布者: yuanxingbbs| 查看: 1129| 评论: 0   选择使用Sketch的理由很多,因为好奇跟风安装 ...

  3. Hadoop 问题 & 解决

    1.将旧版本hadoop升级后,如从hadoop-1.1.2升级到hadoop-1.2.1,会发现使用start-all.sh命令,没有办法启动namenode,即jps,发现没有namenode 原 ...

  4. dom 优酷得弹出

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. iconfont阿里妈妈前端小图标使用方法详解

    图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...

  6. 在linnux下,配置自动备份oacle

    以oracle身份登录到linux,在oracle home目录下创建目录 shell $ mkdir shell 创建自动备份脚本 $ cd shell $ touch expdp.sh $ chm ...

  7. cocos2d-x 3.2 DrawNode 绘图API

    关于Cocos2d-x 3.x 版本的绘图方法有两种: 1.使用DrawNode类绘制自定义图形. 2.继承Layer类重写draw()方法. 以上两种方法都可以绘制自定义图形,根据自己的需要选择合适 ...

  8. [原创]Devexpress XtraReports 系列 7 创建Drill-Down(向下钻取)报表

    昨天发表了Devexpress XtraReports系列第六篇[原创]Devexpress XtraReports 系列 6 创建并排报表,今天我们继续. 今天的主题是创建Drill-Down报表. ...

  9. ESP8266 TCP传输AT指令顺序

    ); //复位 ret = ESP8266_Cmd ( );//测试AT启动 ret = ESP8266_Cmd ( );//选择WIFI应用模式softAP+station //ret = ESP8 ...

  10. 编译安装-Apache

    一.配置选项说明 二.安装apache 1.环境准备 2.安装apr 3.安装apr-util 4.安装pcre 5.安装httpd 6.修改配置文件 7.开机自启动 8.注册为服务 9.测试 一.配 ...