1 Ajax简介

1 ajax概念

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

3 ajax原理

2 JavaScript原生的ajax

1 ajax.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function fn1(){

        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

        var xmlHttp = new XMLHttpRequest();

        //2、绑定监听 ---- 监听服务器是否已经返回相应数据

        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState==4&&xmlHttp.status==200){

                //5、接受相应数据

                var res = xmlHttp.responseText;

                document.getElementById("span1").innerHTML = res;

            }

        }

        //3、绑定地址

        xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);

        //4、发送请求

        xmlHttp.send();

    }

    function fn2(){

        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

        var xmlHttp = new XMLHttpRequest();

        //2、绑定监听 ---- 监听服务器是否已经返回相应数据

        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState==4&&xmlHttp.status==200){

                //5、接受相应数据

                var res = xmlHttp.responseText;

                document.getElementById("span2").innerHTML = res;

            }

        }

        //3、绑定地址

        xmlHttp.open("POST","/WEB22/ajaxServlet",false);

        //4、发送请求

        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        xmlHttp.send("name=wangwu");

    }

</script>

</head>

<body>

    <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>

    <br>

    <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>

    <br>

    <input type="button" value="测试按钮" onclick="alert()">

</body>

</html>

2 AjaxServlet代码

package www.test.ajax01;

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 {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        //response.getWriter().write("zhangsan");

        /*try {

            Thread.sleep(5000);

        } catch (InterruptedException e) {

            e.printStackTrace();

        }*/

        String parameter = request.getParameter("name");

        response.getWriter().write(Math.random()+parameter);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

}

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锁---偏向锁、轻量级锁、自旋锁、重量级锁

    之前做过一个测试,反复执行过多次,发现结果是一样的: 1. 单线程下synchronized效率最高(当时感觉它的效率应该是最差才对): 2. AtomicInteger效率最不稳定,不同并发情况下表 ...

  2. Python之迭代器，生成器与装饰器

    1>迭代器原理及使用: 1>原理: 迭代器是访问集合元素的一种方式,迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束:迭代器只能往前不会后退,不过这也没什         ...

  3. jQuery-File-Upload外部按钮触发上传

    这个控件功能还不错,但是对于外部调用上传有点压力. 比如说,他可以实现在添加一个文件后为文件添加一个上传按钮,这个是写在add中的,可以调用data.submit()提交数据 但是如果我要实现外部按钮 ...

  4. 多线程“尚未调用coinitialize” 报错

    关于多线程中创建使用TADOConnect.TADODataSet等Com组件时,必须先初始化Com 在多线程启用执行前 CoInitialize(nil); 在多线程启用执行后 CoUninitia ...

  5. rabbitmqBat常用指令

    激活 RabbitMQ's Management Pluginrabbitmq-plugins.bat enable rabbitmq_management 查看已有用户及用户的角色rabbitmqc ...

  6. RobotFramework与Jenkins集成后构建成功率高于设置阈值但总是显示失败

    摘要:robot执行后总是失败 1.在配置jenkins的job时,添加构建步骤Execute Windows batch command,输入执行robotframework测试用例命令 2.然后j ...

  7. hello world! hello blog!

    2015年12月21日 16:42:15   博客开启!

  8. 菜鸟的Xamarin.Forms前行之路——原生Toast的简单实现方法

    项目中信息提示框,貌似只有个DisplayAlert,信息提示太过于单一,且在有些场合Toast更加实用,以下是一个简单的原生Toast的实现方法 项目地址:https://github.com/we ...

  9. Nginx自定义扩展模块

    1. 概述 参考 Nginx开发HTTP模块入门 2. 扩展模块(假设根目录名称为nginx) nginx/configure文件中可以修改配置文件路径(编译时使用): 例如像把配置文件从默认的ngi ...

  10. plsql连接oracle客户端(简单，实用方案)附件

    plsql 连接 oracle 需要在本地安装oracle客户端(附件中下载): 将文件下载下来后,放到任意目录,例如 D:\instantclient_10_2 修改 tnsnames.ora 文件 ...