<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script>
function fn1(){
// 1创建ajax引擎对象-----》所有的信息都是通过ajax引擎传递
var xmlhttp=new XMLHttpRequest();
//2 绑定监听
xmlhttp.onreadystatechange=function(){
//5 接受响应的数据
var ret = xmlhttp.responseText;
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//alert(ret);
document.getElementById("span1").innerHTML=ret;
}

}
//3 绑定地址
xmlhttp.open("GET","/day49/ajaxServlet",true);
//4 发送请求
xmlhttp.send();

}
function fn2(){
// 1创建ajax引擎对象-----》所有的信息都是通过ajax引擎传递
var xmlhttp=new XMLHttpRequest();
//2 绑定监听
xmlhttp.onreadystatechange=function(){
//5 接受响应的数据
var ret = xmlhttp.responseText;
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//alert(ret);
document.getElementById("span2").innerHTML=ret;
}

}
//3 绑定地址
xmlhttp.open("GET","/day49/ajaxServlet",false);
//4 发送请求

xmlhttp.send();

}
</script>
</head>
<body>
<input type="button" value="异步访问服务器" onclick="fn1()"><span id="span1"></span>
<input type="button" value="同步访问服务器" onclick="fn2()"><span id="span2"></span>
<input type="button" value="测试按钮" onclick=alert("看我")>
</body>
</html>

对应的servlet

package cn.lijun.demo;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.getWriter().write("qiang");
//request.getParameter("");
try {
Thread.sleep(10000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.getWriter().write(Math.random()+"");
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

原生ajax访问服务器所展现的现象的更多相关文章

  1. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  2. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  3. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  4. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  5. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  6. ajax访问服务器返回json格式

    使用ajax访问服务器返回多条数据,比如返回一个表中的所有数据,页面该如何处理呢?如何获取数据呢?一直不会用ajax返回json格式,今天研究了下,分享给大家~ 首先需要引用服务,点击项目右键,添加引 ...

  7. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  8. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  9. [译]脱离jQuery，使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

随机推荐

  1. JAMstack 最佳实践

    摘自官方介绍,没有翻译(没必要,已经比较简单了,重要的就是进行每条的诠释了,后续...) Entire Project on a CDN Because JAMstack projects don’t ...

  2. netflix vector 系统性能监控安装使用

    说明本次安装使用docker   1. vector 安装 docker run -d --name vector -p 80:80 netflixoss/vector:latest   2. 依赖的 ...

  3. js生成1~100随机数

    (function (min,max){ var range = max - min; var rand = Math.random(); var num = min + Math.round(ran ...

  4. 搭建基于hyperledger fabric的联盟社区（一） --前言

    三个月前上面发了一个关于智群汇聚和问题求解研究的项目,我们公司做其中的一个子项目,就是基于区块链的科技信息联盟构建.利用区块链的去中心化特性,构建一个基于区块链的科技社区,以提供科技群智汇聚采集的基础 ...

  5. Delphi单元文件之－简体繁体互转

    Function GBCht2Chs(GBStr: String): AnsiString; {GBK繁体转简体} Var   len:integer;   pGBCHTChar: PChar;   ...

  6. 要会的123个Python工具！

    本文中列举了123个Python渗透测试工具,当然不仅于渗透~ Network 调试和逆向工程 模糊测试 Web 取证 Volatility: 从 RAM 中提取数据 Rekall: Google 开 ...

  7. 自定义第三方YUM源

    1.切换到cloudboot系统目录中 2.拷贝repodata目录的*-repo.xml文件到系统目录下 3.删除系统目录的repodata目录 4.编辑repo.xml内容,base添加rpm包包 ...

  8. 拦截导弹简单版（读入一串整数时getline（cin,s） stringstream is(s);）

    拦截导弹简单版 时间限制: 1 Sec  内存限制: 128 MB提交: 40  解决: 16[提交][状态][讨论版][命题人:外部导入] 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系 ...

  9. 圆周率的现代计算机求法（C语言） Lebal：research

    C语言求圆周率π 公式法1 #include <stdio.h> #include <math.h> int main(){ float term,result=1; int ...

  10. js前端处理datetime时间类型

    MySql数据库日期字段定义的是datetime类型,(顺带插入MySql数据库datetime类型可以用这个: str_to_date('2008-4-2 15:23:28','%Y-%m-%d % ...