ajax 三种实现方法实例代码

ajax即异步的javascript and xml, 本文章向码农们介绍ajax的三种实现方法(prototype实现,jquery实现,XMLHttpRequest实现)

本文主要是比较三种实现Ajax的方式,为以后的学习开个头。

准备:

1、  prototype.js
2、  jquery1.3.2.min.js
3、  json2.js

后台处理程序(Servlet),访问路径servlet/testAjax:

Java代码

package ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * Ajax例子后台处理程序
 * @author bing
 * @version 2011-07-07
 *
 */
public class TestAjaxServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  String name = request.getParameter("name");
  String age = request.getParameter("age");
  System.out.println("{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}");
  out.print("{\"name\":\"" + name + "\",\"age\":" + age + "}");
  out.flush();
  out.close();
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doGet(request,response);
 }
}

TestAjaxServlet接收两个参数:name和age,并返回一个以JSON格式编写的字符串。

前台页面参数输入界面:

Html代码

<div id="show">显示区域</div>
<div id="parameters">
 name:<input id="name" name="name" type="text" /><br />
 age:<input id="age" name="age" type="text" /><br />
</div>

一、prototype实现

<script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript">
  function prototypeAjax()
  {
  var url = "servlet/testAjax";//请求URL
  var params = Form.serialize("parameters");//提交的表单
  var myAjax = new Ajax.Request(
  url,{
   method:"post",// 请求方式
   parameters:params, // 参数
   onComplete:pressResponse, // 响应函数
   asynchronous:true
  });
  $("show").innerHTML = "正在处理中...";
  }
  function pressResponse(request)
  {
  var obj = request.responseText; // 以文本方式接收
  $("show").innerHTML = obj;
  var objJson = request.responseText.evalJSON(); // 将接收的文本用解析成Json格式
  $("show").innerHTML += "name=" + objJson['name'] + " age=" + objJson['age'];
  }
</script>
<input id="submit" type="button" value="提交" onclick="prototypeAjax()" /><br />

在prototype的Ajax实现中,用evalJSON方法将字符串转换成JSON对象。

二、jquery实现

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<input id="submit" type="button" value="提交" /><br />
<script type="text/javascript">
  function jqueryAjax()
  {
   var user={"name":"","age":""};
   user.name= $("#name").val();
   user.age=$("#age").val();
   var time = new Date();
   $.ajax({
     url: "servlet/testAjax?time="+time,
     data: "name="+user.name+"&age="+user.age,
     datatype: "json",//请求页面返回的数据类型
     type: "GET",
     contentType: "application/json",//注意请求页面的contentType 要于此处保持一致
     success:function(data) {//这里的data是由请求页面返回的数据
     var dataJson = JSON.parse(data); // 使用json2.js中的parse方法将data转换成json格式
     $("#show").html("data=" + data + " name="+dataJson.name+" age=" + dataJson.age);
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
     $("#show").html("error");
     }
   });
  }
  $("#submit").bind("click",jqueryAjax); // 绑定提交按钮
 </script>

刚接触jQuery,在json的处理上借助了json2.js。还请前辈们指教。

三、XMLHttpRequest实现

<script type="text/javascript">
  var xmlhttp;
  function XMLHttpRequestAjax()
  {
   // 获取数据
   var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
   // 获取XMLHttpRequest对象
   if(window.XMLHttpRequest){
   xmlhttp = new XMLHttpRequest();
   }else if(window.ActiveXObject){
   var activxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
   for(var i = 0 ; i < activexName.length; i++){
    try{
     xmlhttp = new ActiveXObject(activexName[i]);
     break;
    }catch(e){}
   }
   }
    xmlhttp.onreadystatechange = callback; //回调函数
    var time = new Date();// 在url后加上时间,使得每次请求不一样
    var url = "servlet/testAjax?name="+name+"&age="+age+"&time="+time;
    xmlhttp.open("GET",url,true); // 以get方式发送请求
    xmlhttp.send(null); // 参数已在url中,所以此处不需要参送
  }
  function callback(){
   if(xmlhttp.readyState == 4){
    if(xmlhttp.status == 200){ // 响应成功
     var responseText = xmlhttp.responseText; // 以文本方式接收响应信息
     var userdiv = document.getElementById("show");
     var responseTextJson = JSON.parse(responseText); // 使用json2.js中的parse方法将data转换成json格式
     userdiv.innerHTML=responseText + " name=" + responseTextJson.name + " age=" + responseTextJson.age;
    }
   }
  }
</script>
<input id="submit" type="button" value="提交" onclick="XMLHttpRequestAjax()" /><br />

通过此文,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • Ajax获取数据然后显示在页面的实现方法

    主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流程和解说 一.列表页 1.访问链接list.php时判断是pc端还是客户端 $user_agent_arr = mall_get_user_agent_arr(); if(MALL_UA_IS_PC == 1) { //****************** pc版 ****************** include_once './list-pc.php';

  • 页面向下滚动ajax获取数据的实现方法(兼容手机)

    页面向下滚动ajax获取数据的实现方法(兼容手机) $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight >= scrollHeight) { loadPromotions(); } }); var pa

  • JSP+jquery使用ajax方式调用json的实现方法

    本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法.分享给大家供大家参考,具体如下: 前台: <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> //test function test(uid) { if(confirm("确定该用户

  • Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

  • ThinkPHP通过AJAX返回JSON的两种实现方法

    本文实例讲述了ThinkPHP通过AJAX返回JSON的两种实现方法.分享给大家供大家参考.具体方法如下: 方法一: php代码如下: 复制代码 代码如下: $arr = array( 'name'=>$picname, 'pic'=>$pics, 'size'=>$size ); $this->ajaxReturn (json_encode($arr),'JSON'); JS部分代码如下: 复制代码 代码如下: var d=eval('('+d+')');//json转成obje

  • 详解PHP+AJAX无刷新分页实现方法

    PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLH

  • yii2使用ajax返回json的实现方法

    本文实例讲述了yii2使用ajax返回json的实现方法.分享给大家供大家参考,具体如下: public function actionAjax() { if(isset(Yii::$app->request->post('test'))){ $test = "Ajax Worked!"; // do your query stuff here }else{ $test = "Ajax failed"; // do your query stuff he

  • 基于ajax的简单搜索实现方法

    本文实例讲述了基于ajax的简单搜索实现方法.分享给大家供大家参考,具体如下: 这里使用两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据,后一个用来对搜索关键字进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: testJs.js // 此函数等价于document.getElementById /document.all function $(

  • jsp页面 列表 展示 ajax异步实现方法

    1. 服务端先返回页面基本结构(如message.jsp), <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ tag

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

随机推荐