<!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. sqlalchemy在pythonweb中开发的使用(基于tornado的基础上)

    一.关于SQLAlchemy的安装pip install SQLAlchemy安装如果上面的方式安装不成功的情况可以使用下面的方法 百度下载window或者linux下面对应的sqlalchemy的版 ...

  2. C#网络编程(同步传输字符串) - Part.2

    服务端客户端通信 在与服务端的连接建立以后,我们就可以通过此连接来发送和接收数据.端口与端口之间以流(Stream)的形式传输数据,因为几乎任何对象都可以保存到流中,所以实际上可以在客户端与服务端之间 ...

  3. php通过存储过程传入汉字参数并写入数据库

    写入数据库,汉字为???样式的乱码,后根据网上介绍的方法,参数前加N,数据库汉字内容变成空白. 解决方法,在PHP中先转为base64,再在mysql中base64解码,前提先保证mysql中有bas ...

  4. 日志jar包冲突报错：Class path contains multiple SLF4J bindings

    问题现象:tomcat启动卡死,报错日志如下: 十一月 07, 2017 8:35:45 下午 org.apache.catalina.core.ApplicationContext log 信息: ...

  5. netty中的UDP

    UDP 提供了向多个接收者发送消息的额外传输模式: 多播——传输到一个预定义的主机组: 广播——传输到网络(或者子网)上的所有主机. 本示例应用程序将通过发送能够被同一个网络中的所有主机所接收的消息来 ...

  6. Vue.js：表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  7. print 函数用法总结

    1. 字符串和数值类型 >>> print(1) 1 >>> print("Hello World") Hello World 2.变量无论什么 ...

  8. JAVA 比较两个日期相差的天数

    在实际的应用中,我们经常会比较两个日期相差的天数,下面我们通过java方法判断两个日期所差的额天数. 具体内容,请看下面的代码: package com.jd.jr.fclient.test; imp ...

  9. 用css实现图片在div内的垂直居中

    已知一个div内有一个img,两者的高度均不知道,但图片的高度一定小于div的高度 代码如下: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell;  ...

  10. 浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统   网格系统的实现原理,是通过定义 ...