AJAX值得重视，动态刷新你看重不重要

最新推荐文章于 2022-03-15 09:36:47 发布

刘歇

最新推荐文章于 2022-03-15 09:36:47 发布

阅读量194

点赞数 2

分类专栏： JavaWeb 文章标签： ajax javascript java

本文链接：https://blog.csdn.net/aljp123/article/details/114680185

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AJAX值得重视，动态刷新你看重不重要

AJAX是什么

首先声明一下AJAJ不是新的编程语言，它是一种现有标准的新方法。

AJAX全称：Asynchronous JavaScript and XML ，表示异步的 JavaScript 和 XML。

它能够在不用重新加载网页的基础上，和服务器交换数据并且更新部分网页的一种技术，

它的核心就是创建XMLHttpRequest对象，通过这个对象可进行发送参数并接收返回的内容。从而实现动态刷新网页的数据。

为什么要用AJAX

首先，它是异步的。那么它的效率是不用说的，异步是不用等待的，不用等待数据是否处理完，是否发送，是否接收，这些都不用管，它可以先立马做自己的事，这期间不用等待。

它也不用重新加载服务器，便可以到获取服务器处理后的数据。

它使用Java Script来绑定和调用，所以可以刷新当前网页的数据，不用重新加载网页。

怎么用AJAX

第一步：创建XMLHttpRequest对象

在创建此对象时，需要考虑浏览器是否兼容。

如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

其他浏览器则是

var xmlHttp=new XMLHttpRequest();

所以当我们一般这么写：

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

用if语句进行判断，再选择创建。

第二步：设置请求方式
调用XMLHttpRequest对象的open(method，url，async)方法。

method：表示请求类型 POST或者GET
url:表示请求地址，服务器上的地址
async:表示是否选择异步， true或者flase，一般选择true，选择异步，不然用AJAX干嘛。

第三步：调用回调函数
所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。

调用XMLHttpRequest对象的onreadystatechange属性，此属性存有处理服务器响应的函数，也就是回调函数。

xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容

第四步：发送请求
调用XMLHttpRequest对象的send(请求参数)方法。

注意：要记得向请求添加 HTTP 头，POST如果有数据一定加加！代码如下：

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");

实战阶段

前台网页代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
       function test1() {
           //1.创建XMLHttpRequest对象
           var xmlHttp;
           if (window.XMLHttpRequest) {
               //非IE
               xmlHttp = new XMLHttpRequest();
           } else if (window.ActiveXObject) {
               //IE
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
           }
           
           //2.设置请求方式
           var url = "http://localhost/Demo20210311/testuname";
           xmlHttp.open("post",url,true);
           
           //3.指定回调函数
           xmlHttp.onreadystatechange=function(){
               //3.1 判断状态
               if(xmlHttp.readyState==4){
                  //3.2 接受返回的内容
                   var text = xmlHttp.responseText;
                   document.getElementById("rs").innerText=text;
               }
           }
           
           //4.发送请求
           xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
           var username=document.getElementById("username").value;
           xmlHttp.send("uname="+username)
       }
    </script>
</head>
<body>
<h2>微博</h2>
用户:<input type="text" id="username" name="uname" onblur="test1()"><span id="rs"></span>
</body>
</html>

服务器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;

	@WebServlet(value = "/testuname")
	public class  NewFileServlet extends HttpServlet {
	    @Override
	    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	       //1.接受请求参数
	        String uname = req.getParameter("uname");
	        resp.setContentType("text/html;charset=utf-8");
	        PrintWriter writer = resp.getWriter();
	        
	        //2.验证，注意:ajax请求处理完毕后，返回数据时使用PrintWriter输出流，且ajax默认返回原页面
	        if("admin".equals(uname)){
	            //用户名已存在
	            writer.print("用户名已存在");
	        }else{
	            //用户名可用
	            writer.print("用户名可用");
	        }

	    }
	}

结果：
在这里插入图片描述

AJAX不必那么麻烦

既然AJAX是用Java Script来调用，那我们知道，一般写Java Script是很麻烦的，为了省事，我们一般都用JQuery来写的，所以我们的AJAX也是可以用JQuery来写的。

如果用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(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});

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

是不是很简单。

按照我实战阶段的例子如果根据post请求用JQuery来写就是这样：

function test1(){
var uname = $(this).val();
$.post("http://localhost/testuname","uname="+uname,function(result){
$("#rs").html(result)
});
}

就到这儿吧！

刘歇

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX值得重视，动态刷新你看重不重要

AJAX值得重视，动态刷新你看重不重要AJAX是什么首先声明一下AJAJ不是新的编程语言，它是一种现有标准的新方法。AJAX全称：Asynchronous JavaScript and XML ，表示异步的 JavaScript 和 XML。它能够在不用重新加载网页的基础上，和服务器交换数据并且更新部分网页的一种技术，它的核心就是创建XMLHttpRequest对象，通过这个对象可进行发送参数并接收返回的内容。从而实现动态刷新网页的数据。为什么要用AJAX首先，它是异步的。那么它的效率是不用
复制链接

扫一扫

专栏目录