Ajax技术

最新推荐文章于 2024-08-21 21:16:19 发布
最新推荐文章于 2024-08-21 21:16:19 发布
阅读量373 收藏 1
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_study_zjh/article/details/77131780
版权

大概内容:
1.Ajax的技术简介
2.Ajax分别通过GET和POST两种方式提交的演示
3.Ajax封装成JS函数(JSON)

Ajax技术的简介

Ajax的全称：Asynchronized-JavaScript-And-XML
技术组成：JavaScript,Dom,Css,XMLHttpRequest(ActiveObject)
状态：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

     其实简单来说就是一种用于快速建立动态网页的技术,通过与服务器进行少量的数据交换可以使网页实现异步更新,即在不加载整个网页的情况下,能完成对部分内容的更新。

Ajax通过GET和POST方式提交的演示

GET方式演示代码:

function check1(obj){
            var name=obj.value;

            //1.创建一个ajax对象
            var xhr=null;

            //看看浏览器是否支持该对象,IE7和火狐、谷歌支持
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{//IE6及以下,其它大部分浏览器
                xhr=new ActiveObject("Microsoft.XMLHttp");
            }

            //2.设置通讯方式和地址
            var url="<c:url value='/OneServlet?name="+ name +"'/>";

            xhr.open("get",url,true);//异步--并行

            //3.设置访问成功后的JS对象(回调函数)
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt=xhr.responseText;
                        alert("成功啦!");
                    }
                }
            };

            //4.发送
            xhr.send(null);//get方式时的参数为null
        }

POST方式代码演示:

function check2(obj){
            var name=obj.value;

            //1.创建一个ajax对象
            var xhr=null;

            //看看浏览器是否支持该对象,IE7和火狐、谷歌支持
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{//IE6及以下,其它大部分浏览器
                xhr=new ActiveObject("Microsoft.XMLHttp");
            }

            //2.设置通讯方式和地址
            var url="<c:url value='/OneServlet'/>";

            xhr.open("post", url, true);//异步

            //3.设置访问成功后的JS对象(回调函数)
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt=xhr.responseText;
                        alert("成功啦!");
                    }
                }
            };

            //post方式必须设置内容类型响应头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            //4.发送
            xhr.send("name="+name);//post方式时,要向后台提交参数
        }

Ajax封装成JS函数

1.封装成函数

function Ajax(obj){
    this.get=function(url){

        //1.创建一个ajax对象
        var xhr=null;

        //看看浏览器是否支持该对象,IE7和火狐、谷歌支持
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{//IE6及以下,其它大部分浏览器
            xhr=new ActiveObject("Microsoft.XMLHttp");
        }

        xhr.open("get",url,true);//异步--并行

        //3.设置访问成功后的JS对象(回调函数)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt=xhr.responseText;
                    alert("成功啦!");
                }else{
                    alter("失败啦!");
                }
            }
        };

        //4.发送
        xhr.send(null);//get方式时的参数为null
    };

    this.post=function(url,name){

        //1.创建一个ajax对象
        var xhr=null;

        //看看浏览器是否支持该对象,IE7和火狐、谷歌支持
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{//IE6及以下,其它大部分浏览器
            xhr=new ActiveObject("Microsoft.XMLHttp");
        }

        xhr.open("post", url, true);//异步

        //3.设置访问成功后的JS对象(回调函数)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt=xhr.responseText;
                    alert("成功啦!");
                }else{
                    alter("失败啦!");
                }
            }
        };

        //post方式必须设置内容类型响应头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //4.发送
        xhr.send("name="+name);//post方式时,要想后台提交参数
    };
}

2.调用Ajax封装成的函数

function check1(obj){
            var name=obj.value;
            var url="<c:url value='/OneServlet?name="+ name +"'/>";
            var ajax=new Ajax();
            ajax.get(url);
        }
        function check2(obj){
            var name=obj.value;
            var url="<c:url value='/OneServlet'/>";
            var ajax=new Ajax();
            ajax.post(url, name);
        }

Ajax封装技术的关键代码

indes.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>Ajax技术演示</title>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        function check1(obj){
            var name=obj.value;
            var url="<c:url value='/OneServlet?name="+ name +"'/>";
            var ajax=new Ajax();
            ajax.get(url);
        }
        function check2(obj){
            var name=obj.value;
            var url="<c:url value='/OneServlet'/>";
            var ajax=new Ajax();
            ajax.post(url, name);
        }
    </script>
  </head>  
  <body>
    <h3>Ajax技术演示</h3>
    <!-- 这里的action可以Ajax指定 -->
    <form action="">
        <span>GET方式的AJax技术演示</span><br/>
        name1:<input type="text" name="name" onblur="check1(this);"/> <br/> 

        <span>POST方式的AJax技术演示</span><br/>
        name2:<input type="text" name="name" onblur="check2(this);"/><br/>

    </form>
  </body>
</html>
ajax.js
function Ajax(obj){
    this.get=function(url){

        //1.创建一个ajax对象
        var xhr=null;

        //看看浏览器是否支持该对象,IE7和火狐、谷歌支持
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{//IE6及以下,其它大部分浏览器
            xhr=new ActiveObject("Microsoft.XMLHttp");
        }

        xhr.open("get",url,true);//异步--并行

        //3.设置访问成功后的JS对象(回调函数)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt=xhr.responseText;
                    alert("成功啦!");
                }else{
                    alter("失败啦!");
                }
            }
        };

        //4.发送
        xhr.send(null);//get方式时的参数为null
    };

    this.post=function(url,name){

        //1.创建一个ajax对象
        var xhr=null;

        //看看浏览器是否支持该对象,IE7和火狐、谷歌支持
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{//IE6及以下,其它大部分浏览器
            xhr=new ActiveObject("Microsoft.XMLHttp");
        }

        xhr.open("post", url, true);//异步

        //3.设置访问成功后的JS对象(回调函数)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var txt=xhr.responseText;
                    alert("成功啦!");
                }else{
                    alter("失败啦!");
                }
            }
        };

        //post方式必须设置内容类型响应头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //4.发送
        xhr.send("name="+name);//post方式时,要想后台提交参数
    };
}
OneServlet
package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class OneServlet 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");

        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");


        out.print(name+"你好,来访时间:"+sdf.format(new Date()));

        out.flush();
        out.close();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();

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

        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        out.print(name+"你好,来访时间:"+sdf.format(new Date()));

        out.flush();
        out.close();
    }
}
天真有邪
关注
ajax技术简介
07-23
主要介绍了AJAX技术的发展史，工作原理，优缺点及其发展前景，仅供参考，谢谢！
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
01-21
本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下： 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发...
Ajax技术简介
罗布泊coding
02-26 825
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。 1、首现谈一下异步传输和同步传输。      异步传输是面向字符的传输。发送方可以在任意时候发送数据，但接收方不知何时到达，就类似于发短信。     同步传输是面向比特的传输。要求传收双方的时钟保持一致，就类似于打电话。 2、原理：通
Ajax技术详解
最新发布
m0_73852099的博客
08-21 1179
JSON(JavaScript Object Notation) 是一种**基于字符串的轻量级的数据交换格式。**易于人阅读和编写，同时也易于机器解析和生成。JSON是JavaScript数据类型的子集。XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。比如说我有一个学生数据： name = “zhangsan”;age = 22;
Ajax技术介绍
柯兄技术博客
05-10 1589
术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返
AJAX技术汇总
bailutuo7403的博客
09-17 181
来源：维基百科 CSDN蓝色理想 ---------------------------------------------------------------------AJAXAJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几...
ajax技术介绍
DemoTransfer
10-26 1790
ajax技术
AJAX技术学习总结分享.pdf
03-15
AJAX技术学习总结分享.pdf 一、Ajax技术原理总结 Ajax技术是一种创建交互式网页应用的网页开发技术，也是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。...
AJAX技术简介
qq_40302790的博客
08-01 288
AJAX全称：Asynchronous JavaScript And XML（异步JavaScript及XML），是一种可以在不必刷新整个浏览器的情况下，与服务器进行异步通讯的技术。即AJAX是一个局部刷新的异步通讯的技术。 AJAX主要是通过XMLHttpRequest对象（即AJAX对象）处理发送请求和回应的。 创建XMLHttpRequest对象的方法如下 ： function ge...
AJAX 技术简介[2]
stonecai的专栏
12-19 943
AJAX 技术简介[2]
ajax技术简介_AJAX简介
cumubi7552的博客
08-02 258
ajax技术简介One of the key skills of a frontend developer is to write asynchronous code for consuming API. AJAX stands for Asynchronous JavaScript and XML. It is an approach or concept to bind web apps an...
AJAX技术深度解析与应用
AJAX技术.ppt 是一份针对高级软件人才的实作培训资料，由讲师王宇提供，主要讲解AJAX技术的相关内容。课程涵盖了AJAX技术的概述、基本原理以及其在实际应用中的优势和挑战。 讲座首先从AJAX技术的定义开始，它是由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值