JavaWeb-Ajax

最新推荐文章于 2024-02-23 11:46:43 发布

难平是人心

最新推荐文章于 2024-02-23 11:46:43 发布

阅读量83

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/Just__2009/article/details/109309162

版权

Java Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax所包含的技术

Ajax并非是一种新技术，而是将原有技术结合
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

Ajax工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。
捕获用户操作，做出相应处理，将有互操作反馈到服务器。
接受浏览器端传来的用户操作，将用户操作分发到其他浏览器端。
接收服务器端发放的用户动作，并对其做出相应处理。

XMLHttpRequest常用属性

onreadystatechange属性
处理服务器响应的函数
xmlHttp.onreadystatechange = function(){}
readyState 属性
服务器响应状态信息。当readyState改变， onreadystatechange函数被执行。
0：请求未初始化（在调用open()前）
1：请求已提出（调用send()前）
2：请求已发送（从响应得到内容头部）
3：请求处理中（有部分数据可用，但是服务器还没有完成响应）
4：请求已完成（可以访问服务器响应并使用它）
向onreadystatechange函数添加条件语句if：
```
xmlHttp.onreadystatechage = function(){
		if (xmlHttp.readyState ==4){
		
		}
	}
```
responseText属性
通过responseText 属性来取回服务器返回的数据。

XMLHttpRequst方法

open()方法
参数1：发送请求所使用的方法。
参数2：规定服务器端脚本URL。
参数3：规定应当对请求进行异步地处理。
```
xmlHttp.open("GET","test.php",true);
```
send()方法
将请求发送给服务器
```
xmlHttp.send(null);
```

Ajax步骤(JavaScript)

1. 创建XMLHttpRequest对象。

	var xmlHttp=new XMLHttpRequest();
	var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE5/6使用ActiveX对象

if (window.XMLHttpRequest) {
//非IE
	xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

2. 设置请求方式。

Get方法：

xmlHttp.open("GET", "/login？usname="+username, true);

Post方法：

xmlHttp.open("POST", "/login", true);
 ......
 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");//发送前需要指定头信息
 xmlHttp.send("uname="+username);

调用回调函数。

xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			var obj = document.getElementById(id);
			obj.innerHTML = xmlHttp.responseText;
		} else {
			alert("AJAX服务器返回错误！");
		}
	}
}

发送请求。

var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数，防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头，POST如果有数据，需要有参数，get方法则不需要
xmlHttp.send(params);

实例：

实现帐号是否重复的动态检测

Login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script type="text/javascript">

      function check(){
        var xmlHttp;
        if (window.XMLHttpRequest) {
          //非IE
          xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          //IE
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        var username = document.getElementById("username").value;
        xmlHttp.open("post","/checkuname?uname="+username,true);

        xmlHttp.onreadystatechange = function() {
          if (xmlHttp.readyState == 4) {
              var obj = document.getElementById("show");
              obj.innerHTML = xmlHttp.responseText;
          }
        }
        xmlHttp.send(null);
      }
  </script>
  <body>
  <h1>登陆页面</h1>

    用户名:<input type="text" name="uname" onblur="check()" id="username"><span id="show">N/A</span>

  </body>
</html>

AjaxServlet.java

@WebServlet(value="/checkuname")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("uname");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        if("admin".equals(username)){
            pw.print("帐号已存在");
        }else{
            pw.print("帐号不存在");
        }

    }

    @Override
    public void destroy() {
        super.destroy();
    }

    @Override
    public void init() throws ServletException {
        super.init();
    }
}

Ajax步骤(JQuery)

语法：

$.ajax({
url:请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },//请求成功时
error:function(jqxhr,textStatus,error)//请求失败时
})

get() 方法通过远程 HTTP GET 请求载入信息

$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});

post() 方法通过远程 HTTP GET 请求载入信息

$.post(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});

实例：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#username").blur(function(){
            var username = $(this).val();

        // $.ajax({
        //         url:"/checkuname",
        //         data:"uname="+username,
        //         type:"get",
        //         dataType:"text",
        //         success:function(result){
        //             $("#show").html(result);
        //
        //         }
        //
        //     });
        // });
        //     $.get("/checkuname","uname="+username,function(result){
        //             $("#show").html(result);
        //     });
            $.post("/checkuname","uname="+username,function(result){
                $("#show").html(result);
            });
        })

    })
</script>
</head>
<body>
<h1>登陆页面</h1>

用户名:<input type="text" name="uname" id="username"><span id="show">N/A</span>

</body>
</html>

难平是人心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。Ajax所包含的技术Ajax并非是一种新技术，而是将原有技术结合1.使用CSS和XHTML来表示。2.使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。
复制链接

扫一扫