两种Ajax方法

Ajax是一种用于快速创建动态网页的技术，他通过在后台与服务器进行少量的数据交换，可以实现网页的异步更新，不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新，现在这项技术已经被人们广泛应用，而对于一些对Web的了解还不是很深入的初学者，Ajax依然带着一层神秘的难懂的色彩，今天就在这里给大家以简单的方式解读一下Ajax的实现步骤和原理，并且给大家两种实现Ajax的方法，js和jquery。

首先ajax其实就是js+xml的技术，前端的表现就是一段js代码。要使用Ajax首先除了要发送请求的页面wait，还要创建一个后缀名为.jsp的文件，用来接收Ajax请求，并且处理数据再返回当前页面，那么我们为了方便阅读，就先将这个页面名称定义为ajax.jsp。

有了一个这样的页面之后，我们要回到请求页，相信学过网页的同学对script标签应该非常熟悉把，是的，接下来的代码就是要书写在script标签中。大家应该知道我们网页中是事件，如鼠标点击事件，鼠标悬停事件，键盘起落事件等等，而发送Ajax请求就是要通过事件来完成，下面我们就用代码来给大家建立一个最基本的Ajax请求：

        <script type="text/javascript">

    function showHint(val) {

        var xmlHttp = new XMLHttpRequest();

        var url = "ajax.jsp?q=" + val;

        url = url + "&sid=" + Math.random();

        xmlHttp.open("GET", url, true);

        xmlHttp.send(null);

        document.getElementById("sun").innerHTML = xmlHttp.responseText;

    }

</script>

    </head>

    <body>

        <form>

            <input type="text" name="tname" value="" />

            <input type="button" name="btn" value="提交"

                onclick=

    showHint(tname.value);

>

        </form>

        你提交的数据是：

        <span id="sun"></span>

    </body>

</html>

因为要对数据进行的操作很少，所以ajax.jsp页面的代码异常简单：

  <body>

    <% String name = request.getParameter("q");

       out.print(name);

    %>

  </body>

</html>

只需要接受到发送过来的数据并且打回去就可以了，现在来说一说这段代码的原理，XMLHttpRequest 是一个现代浏览器都支持的对象，他用于后台与服务器进行数据交互，那么首先我们就要创建出这样一个对象，也就是var xmlhttp = new XMLHttpRequest();创建好这个对象，我们要通过这个对象向服务器发起请求，这儿样就需要用到了他的open()和send()方法，这两个方法都是向服务器发起请求，那么他们有什么区别呢？我么来通过一张表格简单的看一下：

通过这样表格，我们能看出最常用也最好用的方法应该是open(),因为与post想必，get更简单也更快，但是在有些情况中，也需要使用post，例如：无法使用缓存文件（更新服务器上的文件或数据库）和向服务器发送大量数据（POST 没有数据量限制）。说完区别，我们再通过这张表格说一下open()的三个参数的问题，method不用说，和form表单一样，是指定提交方式（get或post）。url是文件在服务器上的位置，这里的文件指的是ajax.jsp也就是Ajax在后台处理数据的文件，一般通过相对路径定位，大家可以发现上面的代码是通过response的？方法，将指定的数据传递过去。async是指发起异步请求与否，当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数，不推荐async=false的用法，但是一些小型项目如上面的那个演示代码，改成true或false都是相同的。

在将请求发往服务器后，通过后台与服务武器进行交互，对数据进行一系列的操作，操作完成后的数据可以通过out.print()方法将数据输出，在请求页面可以通过xmlhttp.responseText取到数据，值得注意的一点就是，当你的数据需要作为XML对象进行解析是，请使用xmlhttp.responseXML属性。

简单的说了一下js方法发送Ajax请求，大家是不是已经有了一个初步的了解，并且可以应用到开发中了呢？其实我们强大的Jquery中，也封装了关于Ajax的实现方法，在这里就不多做解释，因为原理相差不多，直接上代码，相信大家可以看的懂：

    <script type="text/javascript" src="jQuery1.11.1.js"></script>

    <script type="text/javascript">

    function sayHi(){

        $.ajax({

        cache: false,

        type: "POST",

        url:"ajax.jsp",

        data:$('#frm').serialize(),

        async: true,

        error: function(request) {

        alert("请求失败！");

        },

        success: function(data) {

        $("#d").html(data);

        }

        });

        }

    </script>

  </head>

  <body>

    <form id="frm" >

    <input type="text" name="tname" value=""/>

    <input type="button" value="提交" onclick="sayHi();"/>

    <div id="d"></div>

    </form>

  </body>

</html>

ajax.jsp页面代码：

  <body>

    <%

      String userName = request.getParameter("tname");

      out.print(userName+"你好！");

    %>

  </body>

</html>

两种ajax的方法的更多相关文章

  1. 两种Ajax方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

  2. GET和POST两种基本请求方法(转自博主--在途中#)

    GET和POST两种基本请求方法的区别 GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过req ...

  3. 转：GET和POST两种基本请求方法的区别

    原文地址:GET和POST两种基本请求方法的区别 原文如下: GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL ...

  4. 表格细边框的两种CSS实现方法

    在网页制作中,细边框这个制作方法是必不可少的.这里介绍2种常见的表格细边框制作方法,均通过XHTML验证. <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  5. 两种HTTP请求方法：GET和POST的区别

    之前在一些开发者平台使用网页调用API时,一再提到两种请求方法GET和POST,所以就去了解了下.那么这又不得不提到HTTP了! 一.什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户 ...

  6. 修改linux 两种时间的方法

    1,整理了一下怎么修改linux 两种时间的方法. 硬件时间:hwclock 或者clock,设置的方法是 hwclock --set --date="05/12/2018 12:30:50 ...

  7. 矩阵或多维数组两种常用实现方法 - python

    在python中,实现多维数组或矩阵,有两种常用方法: 内置列表方法和numpy 科学计算包方法. 下面以创建10*10矩阵或多维数组为例,并初始化为0,程序如下: # Method 1: list ...

  8. Python中两种处理错误方法的比较

    我所说的处理错误的方法,其实是try:,except和raise这两种. 首先抛出一个实例, dictt={'a':1,'b':2,'c':3} try: if dictt['d']>1: #字 ...

  9. UWP开发中两种网络图片缓存方法

    通常情况下,我们的程序需要从服务器读取图片,但如果需要不止一次读取某一张图片的话,就需要做本地缓存了,这样既为用户省一点流量,又能显得你的APP很快. 假如你已经知道了某一张图片的地址,那么第一件事就 ...

随机推荐

  1. Android屏幕和尺寸

    DisplayMetrics dm=new DisplayMetrics(); //获取的像素高度不包含虚拟键所占空间 ((WindowManager)context.getSystemService ...

  2. 【BZOJ3417】Poi2013 Tales of seafaring 分层图BFS

    [BZOJ3417]Poi2013 Tales of seafaring Description 一个n点m边无向图,边权均为1,有k个询问 每次询问给出(s,t,d),要求回答是否存在一条从s到t的 ...

  3. 《从零开始学Swift》学习笔记（Day 10）——运算符是“ +、-、*、/ ”吗？

    原创文章,欢迎转载.转载请注明:关东升的博客 运算符是用于执行程序代码运算,会针对一个或一个以上操作数项目来进行运算.例如:2+3,其操作数是2和3,而运算符则是“+”.那么“+.-.*./”是运算符 ...

  4. Android之內置、外置SDCard

    From:http://blog.csdn.net/u011290399/article/details/10363881 在项目中,发现通过Android提供的API获取外置SDCard的操作一直不 ...

  5. vim简单的配置

    "设置当文件被改动时自动载入 set autoread "在左侧行号 set nu "tab长度为4 "覆盖文件时不备份 set nobackup " ...

  6. NGINX优化参数

    (1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...

  7. Jenkins 持续集成配置

    Jenkins搭建.NET自动编译测试与发布环境 Jenkins之Deploy部署(包括站点和类库项目) * 续篇--TFS+MSbuild+jenkins 实现 持续集成+自动部署到WEB网站 Je ...

  8. 【转】spring boot application.properties 配置参数详情

    multipart multipart.enabled 开启上传支持(默认:true) multipart.file-size-threshold: 大于该值的文件会被写到磁盘上 multipart. ...

  9. 时间序列模式——ARIMA模型

    ARIMA模型全称为自回归积分滑动平均模型(Autoregressive Integrated Moving Average Model,简记ARIMA),是由博克思(Box)和詹金斯(Jenkins ...

  10. git远程库与本地联系报错：fatal: Not a git repository (or any of the parent directories): .git

    在github上新建了一个仓库,然后相与本地的仓库联系起来 $ git remote add origin https://github.com/lizhong24/mysite2.git fatal ...