码迷,mamicode.com
首页 > Web开发 > 详细

ajax的理解

时间:2018-07-27 13:16:01      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:head   onclick   传统   表单标签   回调   har   业务   xtend   bsp   

文字表述什么是ajax

  AJAX = 异步 JavaScript 和 XML,一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

具体实践讲述ajax的运行机制

  工具

  IntelliJ IDEA,以及firefox浏览器、firebug插件

  新建一个项目,点击web选项

技术分享图片

命名

技术分享图片

工程项目结构

技术分享图片

首先编写一个servlet类,servlet类这里相当于服务器

技术分享图片
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        1.获取参数
//        2.检查参数是否有问题
//        3.校验操作
//        4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回到页面段,而不是将一个新的页面发送给用户

        try {
            request.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter out=response.getWriter();
            //        1.获取参数
            String old=request.getParameter("name");
            //        2.检查参数是否有问题
            if(old==null||old.length()==0) {
                out.println("用户名不能为空");
            }else {
                //        3.校验操作
                String name=old;
                if(name.equals("lxc")){
                    //4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回到页面段,而不是将一个新的页面发送给用户
//                    写法没有发生变化,本质发生了变化
                    out.println("用户名["+name+"]已存在,请更换");
                }else {
                    out.println("用户名["+name+"]未被注册,可以使用");
                }
            }
        }catch(Exception e){
            e.printStackTrace();
        }


    }
}
View Code

然后进行web.xml编写

技术分享图片

然后创建一个ajax.html文件,

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李贤春</title>
    <script type="text/javascript" src="jslib/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="jslib/verify.js"></script>


</head>
<body>
ajax下进行用户校验的实例,请输入用户名:</br>
<!--ajax方式下不需要使用表单来进行数据提交,因此不用写表单标签
ajax方式下不需要name属性,加个id属性就行了-->
<input type="text" id="userName"/>
<input type="button" value="校验" onclick="verify()"/>

<!--这个div用于存放服务器端返回的信息,开始为空
id属性定义是为了利用dom的方式找到某一个节点,进行操作-->
<div id="result"></div>
<!--<div>456</div>
<span>123</span><span>456</span>-->
<!--div和span的直观差异,div中的内容独占一行,span中的内容不独占-->
</body>
</html>
View Code

在页面显示

技术分享图片

在点击校验按钮前,先把js文件给引入进来,要不然点击事件不会生效

目录如下

技术分享图片

当点击校验按钮后,会跳转到一个js文件,现命名为vertify.js。在这个文件里主要干四件事,比较重要。当然会涉及到js的一些内容。

 1、获取文本框中的内容,专业地说就是获取节点,var jqueryObj=$("#userName").其中,Jquery的查找节点的方式是参数中#加上id属性值可以找到一个节点,userName就是ajax.html中的id值,也就是在浏览器页面中输入的用户名的数据。

2、获取节点的数据,var dataName=jqueryObj.val();其中,jquery的方法返回节点的都是jquery的对象,可以继续在上面执行其他的jquery的方法,val()方法就是返回节点数据。

3、将获取到的数据发送到服务器端的servlet,$.get("AjaxServlet?name="+dataName,null,callback);其中,"AjaxServlet?name="+dataName 是把获取到的数据与服务器端的数据连接起来,让其相等,进行相关的业务判断(不需要我们操作),null一栏其实是待发送的Key/Value的参数,callback是载入成功时的回调函数。

4、接收服务器端返回的数据,后面几步需要在回调函数里进行,因为通过回调函数可以将服务器端与页面端有效联通起来。function callback(){   };

  这里先进行测试一下 技术分享图片,我用的是firefox浏览器,firebug插件

  技术分享图片技术分享图片

  进一步测试

  技术分享图片

说明我们写的都是正确的

4是接收服务器段返回的数据,function callback( data){ alert(data)},进行测试

 技术分享图片

测试可用

技术分享图片

5、将服务器端返回的数据动态的显示在页面上,

var resultObj=$("#result");
resultObj.html(data);
alert(data);
其中result出现在ajax.html中,为的是在页面中开辟一条空间存储数据。
测试一下
技术分享图片

通过
技术分享图片

总结:

核心步骤:

1.获取文本框中的内容

2.获取节点中的数据
3.将节点中的数据发送给服务器端的servlet

//节点中的数据在服务器里进行业务判断(自动进行的)

4.接收服务器端返回的数据

5.将服务器端返回的数据动态的显示在页面上


注:因为firefox最新的版本已经不支持firebug插件,所以用的是低版本的,而且网上不好找,这是百度云链接:https://pan.baidu.com/s/1mvf5MJ_FOXnuTb_elXk_gw
 

 

 

 

 

 

 

  

  

 

ajax的理解

标签:head   onclick   传统   表单标签   回调   har   业务   xtend   bsp   

原文地址:https://www.cnblogs.com/lxc116317/p/9376649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!