Ajax--JavaScript实现
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实现的更多相关文章
- Ajax(javascript)案例
一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...
- 自己封装的Ajax - JavaScript
1. [代码][JavaScript]代码 //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data ...
- 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...
- 初见Ajax——javascript访问DOM的三种访问方式
最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- PHP Ajax JavaScript Json 实现天气信息获取
使用第三方服务 间接方式 思路 使用到的服务 实现代码 前端完整代码 总结 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有 ...
- PHP Ajax JavaScript 实现 无刷新附件上传
普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...
- jquery ajax post, get, javascript ajax post, get 处理
ajax 创建 XMLHttp 对象IE7 以上的版本都支持 XMLHttpRequestIE7 以下的用 ActiveXObject async:true, // 当false 时,当执行完这个才 ...
- AJAX简介
基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...
- 「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 =& ...
随机推荐
- 创建局域网内远程git仓库,并将本地仓库push推到远程仓库中
转载请注明出处 http://www.goteny.com/articles/2014/06/136.html http://www.cnblogs.com/zjjne/p/3778640.html ...
- 关于手机"内存"的解答
关于手机"内存"的解答 内存小/少 手机内存在手机出厂的时候就已经固定了,其总量无法调整,不能像电脑一样加内存条.所以想提升可用内存,除了经常清理系统,或者把不是必须的应用移到SD ...
- 作了点有意义 的事,加入CLOUDSTACK官方文档的中文翻译工作
https://www.transifex.com/ 昨天到今天,作了个部署构架方面的翻译.
- vmware压缩磁盘空间的方法
家里笔记本40G,可用空间怎么挤都只剩7G,从单位copy回来的linux虚拟机要10G,经检查实际使用空间5.7,也就是其他都是空余空间,可以释放掉.(只适合independent.Persiste ...
- 错误 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 ...
- 《Linear Algebra and Its Applications》-chaper2-矩阵代数-分块矩阵
分块矩阵的概念: 在矩阵的实际应用中,为了形式的更加简化我们将一个较大的矩阵的内部进行一定的划分,使之成为几个小矩阵,然后在表大矩阵的时候,矩阵的内部元素就用小矩阵代替. 进行了这一步简化,我们就要分 ...
- 一种用单片机AD采样方式来检测交流市电电压的方法
下面介绍一种用单片机AD采样的方式检测市电电压的方法 要检测交流市电的电压,通常有两种方法 一.通过频繁的采样后再求平均值来获得实际电压值 二.通过采样交流市电的峰值,再通过算法得出实际电压值 这里 ...
- vector的含义
数学中,vector(向量)表示一个量,由大小和方向构成.比如坐标中的一个带箭头的线段 -- 它1厘米长,正弦值六分之一π(30度角). 计算机的c++.java中,vector表示一种一维的数组.比 ...
- 那些年,学swift踩过的坑
最近在学swift,本以为多是语法与oc不同,而且都是使用相同的cocoa框架,相同的API,但是或多或少还是有些坑在里,为了避免以后再踩,在这里记下了,以后发现新的坑,也会慢慢在这里加上 [TOC] ...
- 将Apache添加为Linux的服务 实现自启动(转)
在Linux下用源代码方式编译安装完Apache后,启动关闭Apache可以通过如下命令实现: /app/apache2.2.14/bin/apachectl start | stop | resta ...