欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

初窥Ajax

程序员文章站 2022-05-23 10:12:58
...

由于本人最近对后端感觉迷茫,所以今天初步了解了Ajax(js和xml的合体)的技术。
下面有技术的简介,就不说明了,直接带来几个小案例吧。
1. 使用Ajax方式发送Get请求
这里是前端的代码初窥Ajax
XMLHttpRequest:用于向网页发送请求的对象
初窥Ajax
当单击超链接时,会执行此函数 路径后面我们传了两个参数(name和age)
初窥Ajax
2. 后端代码初窥Ajax
由于dopost调用deget()方法所以这里我们只截取了doget方法

  1. 发布项目,访问我们会惊奇的发现后端代码接收到了请求。

使用Ajax方式发送Post请求**

  1. 前端代码
    初窥Ajax
    因为post和get请求不同我们传参的话必须要加上请求头
    初窥Ajax
    使用Ajax做了一个用户名校验工作
    1.前端代码块
function checkusername() {
		// 获取输入框的值

		var name = document.getElementById("name").value;
		// 1.创建对象,发送请求
		var request = ajaxFunction();
		// 2.发送请求
		request.open("POST", "/Demo01Servlet", true);
		
		// 注册状态改变监听,获取服务器传来的数据
		request.onreadystatechange = function(){
			
			if(request.readyState ==4 && request.status ==200){
				var data = request.responseText;
				if(data===1){
					document.getElementById("span01").innerHTML = "<font color="red">用户名存在</font>";
				}else{
					document.getElementById("span01").innerHTML = "<font color="red">用户名可用</font>";
				}
			}
		}
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		request.send("name="+name);
	}

onreadystatechange:如果想获取后端传来的数据的话,就使用这个
request.readyState ==4 : 网页加载完成