Ajax:一种不用刷新整个页面便可与服务器通讯的办法
  Ajax实现的步骤:

    1、创建XMLHttpRequest对象

    2、服务器向浏览器响应请求(注册监听)

    3、浏览器与服务器建立连接

    4、浏览器向服务器发送请求

    readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
                0 代表未初始化。 还没有调用 open 方法
                1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
                2 代表已加载完毕。send 已被调用。请求已经开始
                3 代表交互中。服务器正在发送响应
                4 代表完成。响应发送完毕
                
            常用状态码及其含义:
                404 没找到页面(not found)
                403 禁止访问(forbidden)
                500 内部服务器出错(internal service error)
                200 一切正常(ok)
                304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

    xhr.open(method, url, asynch);
             * 与服务器建立连接使用
             * method:请求类型,类似 “GET”或”POST”的字符串。
             * url:路径字符串,指向你所请求的服务器上的那个文件。请求路径
             * asynch:表示请求是否要异步传输,默认值为true(异步)。

    send()方法:
                   * 如果浏览器请求的类型为GET类型时,通过send()方法发送请求数据,服务器接收不到    
                   * 如果浏览器请求的类型为POST类型时,通过send()方法发送请求数据,服务器可以接收

Demo:

Get方式

window.onload=function()
{
document.getElementById("ok").onclick=function(){
var xhr=createXmlHttpRequest();//获取XmlHttpRequest对象 xhr.onreadystatechange=function(){//回调函数
if(xhr.readyState==4){//回调状态
if(xhr.status==200 || xhr.status==304)//服务器状态吗
{
var date=xhr.responseText;//服务器返回数据
alert(date);
}
}
};
var id="A001";
alert(id);
xhr.open("GET","../testGetServelet?id="+id,true);//1、发送方式2、页面路径,3、请求是否异步,默认为true
xhr.send(null);//发送数据--get方式,这里不用写数据,即使写了数据服务器端也无法接收
}; function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
} };
 Post方式

 window.onload=function(){
document.getElementById("ok").onclick=function(){
var xhr=createXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4)
{
if(xhr.status==200 || xhr.status==304)
{
var data=xhr.responseText;
alert(data);
}
}
}; xhr.open("post","../testGetServelet",true);
//如果是POST请求方式,设置请求首部信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("a=1&b=2");
}; function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
} };

 可以返回xml文件,但是返回的相应头必须是text/html,而不是text/xml,接收时用xhr.responseXML。

Ajax--JavaScript实现的更多相关文章

  1. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  2. 自己封装的Ajax - JavaScript

    1. [代码][JavaScript]代码      //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data ...

  3. 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

    当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...

  4. 初见Ajax——javascript访问DOM的三种访问方式

    最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...

  5. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  6. PHP Ajax JavaScript Json 实现天气信息获取

    使用第三方服务 间接方式 思路 使用到的服务 实现代码 前端完整代码 总结 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有 ...

  7. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  8. jquery ajax post, get, javascript ajax post, get 处理

    ajax 创建 XMLHttp 对象IE7 以上的版本都支持 XMLHttpRequestIE7 以下的用 ActiveXObject async:true,  // 当false 时,当执行完这个才 ...

  9. AJAX简介

    基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...

  10. 「2014-3-13」Javascript Engine, Java VM, Python interpreter, PyPy – a glance

    提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...

随机推荐

  1. 创建局域网内远程git仓库,并将本地仓库push推到远程仓库中

    转载请注明出处 http://www.goteny.com/articles/2014/06/136.html http://www.cnblogs.com/zjjne/p/3778640.html ...

  2. 关于手机"内存"的解答

    关于手机"内存"的解答 内存小/少 手机内存在手机出厂的时候就已经固定了,其总量无法调整,不能像电脑一样加内存条.所以想提升可用内存,除了经常清理系统,或者把不是必须的应用移到SD ...

  3. 作了点有意义 的事,加入CLOUDSTACK官方文档的中文翻译工作

    https://www.transifex.com/ 昨天到今天,作了个部署构架方面的翻译.

  4. vmware压缩磁盘空间的方法

    家里笔记本40G,可用空间怎么挤都只剩7G,从单位copy回来的linux虚拟机要10G,经检查实际使用空间5.7,也就是其他都是空余空间,可以释放掉.(只适合independent.Persiste ...

  5. 错误 1 未能找到元数据文件“C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/wwwroot/7cb4fcd

    错误 1 未能找到元数据文件“C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/wwwroot/7cb4fcd ...

  6. 《Linear Algebra and Its Applications》-chaper2-矩阵代数-分块矩阵

    分块矩阵的概念: 在矩阵的实际应用中,为了形式的更加简化我们将一个较大的矩阵的内部进行一定的划分,使之成为几个小矩阵,然后在表大矩阵的时候,矩阵的内部元素就用小矩阵代替. 进行了这一步简化,我们就要分 ...

  7. 一种用单片机AD采样方式来检测交流市电电压的方法

    下面介绍一种用单片机AD采样的方式检测市电电压的方法  要检测交流市电的电压,通常有两种方法 一.通过频繁的采样后再求平均值来获得实际电压值 二.通过采样交流市电的峰值,再通过算法得出实际电压值 这里 ...

  8. vector的含义

    数学中,vector(向量)表示一个量,由大小和方向构成.比如坐标中的一个带箭头的线段 -- 它1厘米长,正弦值六分之一π(30度角). 计算机的c++.java中,vector表示一种一维的数组.比 ...

  9. 那些年,学swift踩过的坑

    最近在学swift,本以为多是语法与oc不同,而且都是使用相同的cocoa框架,相同的API,但是或多或少还是有些坑在里,为了避免以后再踩,在这里记下了,以后发现新的坑,也会慢慢在这里加上 [TOC] ...

  10. 将Apache添加为Linux的服务 实现自启动(转)

    在Linux下用源代码方式编译安装完Apache后,启动关闭Apache可以通过如下命令实现: /app/apache2.2.14/bin/apachectl start | stop | resta ...