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. iOS 开发工程师

    iOS 开发工程师 工作职责: 负责下厨房 iPhone 客户端的产品开发.维护.优化以及扩展. 任职要求: 对技术有热情,热爱新的挑战 熟悉 CocoaTouch, ASIHttpRequest, ...

  2. 一】Maven入门

    一.简单pom.xml配置文件解析 <?xml version="1.0" encoding = "utf-8"?> <project xml ...

  3. KEIL C51的XBYTE关键字

    The XBYTE macro allows you to access individual bytes in the external data memory of the 8051. You m ...

  4. 【HDOJ】1506 Largest Rectangle in a Histogram

    Twitter还是Amazon拿这个题目当过面试题.DP区间求面积. /* 1506 */ #include <cstdio> #include <cstring> #incl ...

  5. COJ 0332 The Flash

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=302 The Flash 难度级别:B: 运行时间限制:1000ms: 运行 ...

  6. HashTable与HashMap使用总结

    1.HashTable和HashMap比较 1)继承的父类不同. Hashtable继承自Dictionary类,而HashMap继承自AbstractMap类.但二者都实现了Map接口. publi ...

  7. 用Jpush极光推送实现抓取特定某个用户Log到七牛云服务器

    场景 我们的app常常会出现某个特定用户的手机出现异常情况,(注意不是所有用户,特定机型特定用户)如果用友盟,那么多log你也抓不完 ,看不到log就无法解决问题. 那么问题来了,如何实现对特定某个用 ...

  8. Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)

    1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除selec ...

  9. mysql oracle静默 一键安装脚本

    pre-read; 为了达到一键搞定的目的!现Ruiy简单做如下几小条规定   如果你想这么一键来搞定请君莫要违背约束! 1. 下载 `二进制` mysql软件介质版本不限,二进制包务必,源码及rpm ...

  10. [week4]每周总结与工作计划

    计算机网络 TAT 小白dp 28号还有一场 背单词 背马克思 python目标80% 熟悉coursera c++模版和 仿函数 人文修养 开学数据库,itercast的sql*2 itercast ...