关于学习ajax的总结

来源:互联网 发布:淘宝店铺转让新规 编辑:程序博客网 时间:2024/03/29 04:54

一:摘要,什么是ajax

   AJAX 即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

AJAX 工作原理
工作的原理

二:介绍,使用ajax

   在jquery中ajax实现方法分类很多种,如有:load、jQuery get、jQuery post、jQuery getScript、jQuery Ajax 事件、jQuery ajaxSetup等等,前面几种为常用的也是用得最多的jquery ajax方法了,
这里我主要介绍的是 :

* jQuery get、jQuery post*

也是我最常有的几种方式

三:使用 jQuery.get( url, [data], [callback], [type] )

   jQuery提供了几个用于发送Ajax请求的函数. 其中最核心也是最复杂的是jQuery.ajax( options ),所有的其他Ajax函数都是它的一个简化调用. 当我们想要完全控制Ajax时可以使用此结果, 否则还是使用简化方法如get, post, load等更加方便.

定义和用法
   get() 方法通过远程 HTTP GET 请求载入信息,这是一个简单的 GET 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax。

语法:

$(selector).get(url,data,success(response,status,xhr),dataType)

下面是w3c的介绍:

这里写图片描述

这是一个案例:直接上图

项目的目录结构,这里我用servlet

这里写图片描述

贴下里面的内容:
AjaxText的内容

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-1.11.1.js"></script><title>Insert title here</title><script type="text/javascript">$(function(){    $("#text").click(function(){        $.get("Servet",function(data){            alert(data);            $("#info").html(data);        })    })})</script></head><body><input type="button" id="text"  value="Ajax测试"><div id="info"></div></body></html>

Servlet.java

package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class Servet */@WebServlet("/Servet")public class Servet extends HttpServlet {    private static final long serialVersionUID = 1L;    /**     * @see HttpServlet#HttpServlet()     */    public Servet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub          response.setContentType("text/html;charset=UTF-8");          PrintWriter out=response.getWriter();          out.println("这是我的ajax测试");    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

运行结果:

这里写图片描述

.post方法和get方法基本是一样的,只是把get改为post就可以了*关于get和post的的传值区别,大家可以看这个博客,还是不错的*

http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html

1 0
原创粉丝点击