<!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. Spring中类型自动装配--byType

    在Spring中,“类型自动装配”的意思是如果一个bean的数据类型与其它bean属性的数据类型相同,将自动兼容装配它. 例如,一个“persion” bean 公开以“ability”类数据类型作为 ...

  2. egg 使用手记（一）

    1. 文件加载规则 引用官方的说法: 框架在加载文件时会进行转换,因为文件命名风格和 API 风格存在差异.我们推荐文件使用下划线,而 API 使用驼峰.比如 app/service/user_inf ...

  3. ubuntu下使用code::blocks编译运行一个简单的gtk+2.0项目

    在具体的操作之前,首先需要安装一些必要的软件.ubuntu下默认安装了gcc,不过缺少必要的Header file,可以在命令行中输入下面的指令安装build-essential套件:sudo apt ...

  4. [PYTHON 实作] 算100

    问题:编写一个在1,2,…,9(顺序不能变)数字之间插入+或-或什么都不插入,使得计算结果总是100的程序,并输出所有的可能性.例如:1 + 2 + 34 – 5 + 67 – 8 + 9 = 100 ...

  5. chrome浏览器手动添加印象笔记剪藏插件

    标签(空格分隔): chrome浏览器,日常办公 一直为每次从网页上复制内容之后,还需要再去复制对应的网址,倍感麻烦.之前偶尔这样操作还可以,最近在学习新东西,要保留下来的网页实在太多,而且不利于分类 ...

  6. 事件调度器及C++中的使用

    转自:http://blog.ch-wind.com/ue4-event-dispatcher-and-delegate/ 事件调度器非常的适合在各个蓝图之间实现通信功能. 当前UE4版本4.8.3. ...

  7. JavaScript笔记——DOM的操作

    节点及其类型 在JavaScript中,节点分为三种: 元素节点:HTML标签元素. 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在什么 ...

  8. MyEclipse10.6/Eclipse4.2 集成 flash builder 4.6

    MyEclipse10.6/Eclipse4.2 集成 flash builder 4.61. 安装 Myeclipse10.6 或 Eclipse 4.2 以及 Flash builder 4.6 ...

  9. 网站漏洞扫描并自动化工具-XAttacker

    注:该脚本根据网站的cms类型来扫描,所以推荐用来扫外国的站 运行脚本 ┌─[root@sch01ar]─[/sch01ar/XAttacker] └──╼ #perl XAttacker.pl 询问 ...

  10. thingsboard在windows下安装和使用

    在官网下载thingsboard和tb-gateway 需要安装java8 thingsboard服务安装 https://thingsboard.io/docs/user-guide/install ...