Ajax.js ajax是通过流的方式处理页面请求

var createAjax = function(){var ajax = null;try{ajax = new ActiveXObject("microsoft.xmlhttp");}catch(e1){try{ajax = new XMLHttpRequest();}catch(e2){alert("请换掉你的浏览器");}}return ajax;
}

     /* 判断用户名 */document.getElementById("username").onblur = function(){var username = this.value;var span = document.getElementById("myspan");if(username.length==0){span.innerHTML="用户名不能为空";}else{var ajax = createAjax();var method = "POST";var url="${pageContext.request.contextPath }/AjaxServlet?time="+new Date().getTime();ajax.open(method,url);/* 设置请求头,ajax默认是get提交方式 */ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");username= encodeURI(username);          /*请求参数*/var content = "username=" + username;ajax.send(content);/* ---------------------------- */                ajax.onreadystatechange = function(){if(ajax.readyState==4 && ajax.status == 200){var valueSrc = ajax.responseText;var img = document.createElement("img");img.src = valueSrc;img.style.width="12px";img.style.height="12px";span.innerHTML="";span.appendChild(img);}                    }}}

在servlet中的处理

String username = request.getParameter("username");username = new String(username.getBytes("ISO-8859-1"), "utf-8");System.out.println(username);if ("ss".equals(username)) {response.getWriter().write("image/MsgError.gif");} else {if (username.length() > 0) {response.getWriter().write("image/MsgSent.gif");}}

步骤详情

        <h1>Ajax实例</h1><div id="myAjax">ajax将要获取的内容</div><button id="myBtn" onclick="btnClick()">获取内容</button><script type="text/javascript">function btnClick(){//获取ajaxvar ajax = createAjax();//ajax的请求方式var method = "POST";//ajax向服务器(action)发送请求var url = "${pageContext.request.contextPath }/ajaxActiont_start.action?time="+ new Date().getTime();//ajax拼接字符串,准备请求,请求方式+请求地址ajax.open(method, url);/* 设置请求头,ajax默认是get提交方式 *///前一个参数文本内容,后一个参数文本内容字符集,基本上是会自动给你转换为utf-8ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//这里实际上是把表单中数据转为utf-8的一种方法//username = encodeURI(username);/*请求参数*///这里的参数就是类似于键值对的方式提交,准确的说就是.properties文件中的键值对所以是如下形式传参数var content = "username=" + "1";//发送请求ajax.send(content);/* ---------------------------- *///当请求状态改变的时候ajax.onreadystatechange = function(){//动态状态码为4并且浏览器状态为200的时候if(ajax.readyState==4 && ajax.status == 200){//获取返回的文本流数据var value = ajax.responseText;//获取到指定divvar text = document.getElementById("myAjax");//给指定div中插入数据text.innerHTML = value;}                    }}</script>

jQuery中ajax应用

                            $.ajax({type : "POST",url : "${pageContext.request.contextPath}/suspicious/suspectParty?time="+ new Date().getTime(),data : {partyid : $pno},success : function(data) {//alert(data.rst.id);var ccd = '';if (data.rst.partyClassCd == 'C') {ccd = '对公当事人';}if (data.rst.partyClassCd == 'I') {ccd = '个人当事人';}$("#ptytb").append("<tr id='ptytr'><td>"+ "<input id='rdo' type='radio'  οnclick='rdocl()'/>"+ "</td>"+ "<td>"+ data.rst.partyId+ "</td>"+ "<td>"+ data.rst.partyChnName+ "</td>"+ "<td>"+ data.rst.cardNo+ "</td>"+ "<td>"+ "36"+ "</td>"+ "<td>"+ ccd+ "</td></tr>");}});});

转载于:https://www.cnblogs.com/ShaoXin/p/7411427.html

j2ee之原生AJAX相关推荐

  1. 原生ajax XMLHTTPRequest()

    原生ajax XMLHTTPRequest() 视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=10 代码 <!DOCTYPE html> ...

  2. ajax不执行_好程序员Java学习路线分享原生Ajax的使用

    好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是 异步.JavaScript ...

  3. java原生封装_[Java教程]原生AJAX封装

    [Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...

  4. 对原生ajax的理解

    $.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...

  5. 原生ajax请求及readyState的几种状态

    原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...

  6. 原生ajax如何执行,原生ajax调用数据实例讲解

    由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的aja ...

  7. .ajax get 写法,原生Ajax写法(GET)

    ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...

  8. Django学习---原生ajax

    Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...

  9. 面试整理(1):原生ajax

    接到电话面试,有一些送分题答的不好,在这里整理一下 问题:原生ajax的工作流程是怎么样的? 老用封装好的工具,原生的ajax其实并不熟悉,今天复习一下.主要参考http://www.w3school ...

最新文章

  1. 在java的程序里date类型比较大小
  2. (CV方向)精通C++,该如何学?
  3. ssh登录一段时间后断开的解决方案
  4. visualSVN下载与安装
  5. 淘宝API调用 申请 获取session key
  6. WAF(NGINX)中502和504的区别
  7. java中的算数运算符号用法与原理分析
  8. App.config 中读写appSettings、system.serviceModel终结点,以及自定义配置节
  9. 7-12 文件传输 (25 point(s))
  10. 第一个Django项目----一小时写出账号密码管理系统
  11. python开发:开源pytesseract文字识别
  12. 让电机动起来!Arduino驱动步进电机教程
  13. 年度网络购物十大被投诉网站淘宝、当当位居前二正文
  14. 企业级docker仓库Harbor在kubernetes上搭建使用
  15. GUID分区表的学习
  16. 在 .NET 应用程序中运行 JavaScript
  17. 一台笔记本连接WiFi,与一台只有有线网卡的台式机共享Internet的方法
  18. 简单易懂的理解java开发中的 DO、BO、DTO、VO、AO都是什么✌
  19. USB2.0协议原文阅读笔记
  20. mysql中有几种模糊查询?

热门文章

  1. 20175212童皓桢 Java实验二-面向对象程序设计实验报告
  2. 找出1-100中缺失的两个数
  3. 从github克隆内容到本地时权限问题
  4. SUBSTRING的用法问题
  5. 约瑟夫问题(丢手帕问题)的java实现
  6. HDOJ 1056 HangOver
  7. Idea打Jar包的坑,工程使用ali druid 等ali组件
  8. NOSQL系列-Redis精简版安装与Ruby测试
  9. php简单文件上传类
  10. SQLSERVER 游标