1 Ajax简介

1 ajax概念

2 什么是同步？什么是异步？

3 ajax原理

2 JavaScript原生的ajax

1 ajax.html代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9.     function fn1(){
  10.         //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
  11.         var xmlHttp = new XMLHttpRequest();
  12.         //2、绑定监听 ---- 监听服务器是否已经返回相应数据
  13.         xmlHttp.onreadystatechange = function(){
  14.             if(xmlHttp.readyState==4&&xmlHttp.status==200){
  15.                 //5、接受相应数据
  16.                 var res = xmlHttp.responseText;
  17.                 document.getElementById("span1").innerHTML = res;
  18.             }
  19.         }
  20.         //3、绑定地址
  21.         xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
  22.         //4、发送请求
  23.         xmlHttp.send();
  24.  
  25.     }
  26.     function fn2(){
  27.         //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
  28.         var xmlHttp = new XMLHttpRequest();
  29.         //2、绑定监听 ---- 监听服务器是否已经返回相应数据
  30.         xmlHttp.onreadystatechange = function(){
  31.             if(xmlHttp.readyState==4&&xmlHttp.status==200){
  32.                 //5、接受相应数据
  33.                 var res = xmlHttp.responseText;
  34.                 document.getElementById("span2").innerHTML = res;
  35.             }
  36.         }
  37.         //3、绑定地址
  38.         xmlHttp.open("POST","/WEB22/ajaxServlet",false);
  39.         //4、发送请求
  40.         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  41.         xmlHttp.send("name=wangwu");
  42.  
  43.     }
  44.  
  45. </script>
  46.  
  47. </head>
  48. <body>
  49.     <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
  50.     <br>
  51.     <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
  52.     <br>
  53.     <input type="button" value="测试按钮" onclick="alert()">
  54. </body>
  55. </html>

2 AjaxServlet代码

  1. package www.test.ajax01;
  2.  
  3. import java.io.IOException;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8.  
  9. public class AjaxServlet extends HttpServlet {
  10.  
  11.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
  12.             throws ServletException, IOException {
  13.  
  14.         //response.getWriter().write("zhangsan");
  15.  
  16.         /*try {
  17.             Thread.sleep(5000);
  18.         } catch (InterruptedException e) {
  19.             e.printStackTrace();
  20.         }*/
  21.  
  22.         String parameter = request.getParameter("name");
  23.  
  24.         response.getWriter().write(Math.random()+parameter);
  25.  
  26.     }
  27.  
  28.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  29.             throws ServletException, IOException {
  30.         doGet(request, response);
  31.     }
  32. }

3 注意事项

4 ajax图解

Ajax(Asychronous JavaScript and XML)笔记的更多相关文章

  1. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  2. 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。

    指一种创建交互式网页应用的网页开发技术. AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词. 不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Stan ...

  3. ajax(Asynchronous JavaScript and XML) 异步js或者xml

    1.XMLHttpRequest 对象:向服务器发送局部的请求,异步获取执行 a.浏览器支持 b.语法: xmlhttp==new XMLHttpRequest(); xmlhttp.open(&qu ...

  4. How to make an HTTP request 异步 JavaScript 和 XML

    https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started In order to make an HTTP request to th ...

  5. AJAX异步的 JavaScript

    什么是AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. ...

  6. 【JavaScript】AJAX总结（异步JavaScript和XML）

    AJAX介绍 通过 AJAX,你可以创建更好.更快以及更友好的 WEB 应用程序. AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象. AJAX 应用程 ...

  7. AJAX（Asynchronous JavaScript And XML）

    AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...

  8. Javascript & JQuery读书笔记

    Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...

  9. ajax-异步JavaScript和XML

    什么是ajax? ajax是异步的javascript和XML ( Asynchronous Javascript And XML ) 优点:节省用户操作时间,提高用户体验.减少数据请求次数. 什么是 ...

随机推荐

  1. Java Input Stream Diagram

    JAVA IO Diagram |-- ByteArrayInputStream |-- BufferedInputStream |-- FileInputStream |-- DataInputSt ...

  2. IO--性能计数器

    --===================================================================== --在分析磁盘队列时,应参考数据库的其他计数器,如Che ...

  3. C#判断一个字符串是否是数字或者含有某个数字

    第一种就是 最常见的 用Try..Catch.. 再try中强转你要确认的string 类型 成功就是int  catch 就不是 string a = "avdfd"; try ...

  4. 网站运维之 使用IIS日志分析器1.03.exe进行IIS服务器日志分析

    引言 对于网站运维是一个比较要细心有耐心的工作,当一个网站从开发到上线后,后期的维护也很关键,特别是对于引流的网站来说更是至关重要. 对于网站运维的内容大致可以分为: SEO流量监控方面:风险防控:访 ...

  5. 转载：quartz详解：quartz由浅入深

    转载网址:http://blog.itpub.net/11627468/viewspace-1763498/ 一.quartz核心概念 先来看一张图:         scheduler 任务调度器 ...

  6. 比较旧的写法：验证车牌、手机号、电话、qq等

    1.验证车牌代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 使用concat做字符串拼接和数据迁移

    作用: 解决一开始数据库建立不合理造成的字段冗余,从而提取部分字段,数据迁移.拼接字符串的功能. 格式: concat(字段1,'间隔符',字段2....) concat_ws('间隔符',字段1,字 ...

  8. 各大SRC中的CSRF技巧

    本文作者:i春秋签约作家——Max. 一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/ses ...

  9. [AIR] AIR将数据保存并导出为Excel

    package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.filesystem.File; ...

  10. webpack2的一些使用入门

    首先创建一个webpack文件夹我取名叫webpackVue(为了后续把vue集成进来) 1.首先用npm初始化一下,在这个目录下,执行npm init 2.npm install webpack - ...