AjaxエントリーのGET送信とPOST送信の小さな演習

AjaxテクノロジーのGET送信およびPOST送信の小さな演習

• Ajaxテクノロジーは主にユーザーエクスペリエンスを向上させるために使用され、Ajaxは弾幕、地図などの多くの場所で使用されます。理解を深めるためのAjax紹介の小さな演習

Ajaxが提出テストを受ける

ボタンをクリックすると、現在の時刻がポップアップします

1. コントローラーレイヤークラスを準備する

@Controller//管理对象
public class AjaxGetController {
	@RequestMapping("/getTimer")
	@ResponseBody//返回一个json数据不经过视图解析器
	public String getTimer(){
		System.out.println(new Date().toLocaleString());
		return new Date().toLocaleString();
	}
}

2. HTMLページを準備する
ステップ：Ajaxコアオブジェクト
を取得する作業を送信する準備をする
ajax送信リクエストステータスとレスポンスステータスコードの変更を監視するリスナー関数を準備するリクエストを
送信する

/* 创建ajax的核心对象 */
	function createXhr(){
		try{
			return new XMLHttpRequest();//主流浏览器是支持的
		}catch(e){
			return new ActiveXObject("Microsoft.XMLHTTP"); //针对低版本的IE浏览器支持创建的 核心对象
		}
	}
	function getTimer(){
		//创建ajax的核心对象
		var xhr = createXhr();
		/*
			发送请求的准备工作
				1.第一个参数：使用GET提交还是POST提交
				2.第二个参数：请求的url地址
				3.第三个参数：请求是同步还是异步
						true:异步
						false:同步
		*/
		xhr.open("GET","/getTimer",true);
		//准备监听函数，监听ajax发送请求状态的改变和响应状态码
		xhr.onreadystatechange = function(){
			//当readyState=4的时候，就代表后台数据已经响应完成
			if(xhr.readyState==4 && xhr.status==200){
				var text = xhr.responseText;
				alert(text);
			}
		}
		//发送请求
		xhr.send();
	}

Ajax投稿送信テスト

1. ユーザーエンティティクラスを準備する

public class User {
	private String username;
	private String password;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}	
}

2. Controllerクラスを準備する

@Controller//管理对象
public class LoginController {
	@RequestMapping("/login")
	@ResponseBody//响应式一个json数据
	public String login(User user){
		//判断用户名和密码
		if("root".equals(user.getUsername())&&
			"123".equals(user.getPassword())){
			return "true";
		}else{
			return "false";
		}
	}
}

3. HTMLページを準備する

手順：Ajaxコアオブジェクト
を取得する作業を送信
する準備をするajax送信リクエストのステータスと応答ステータスコードの変化を監視する監視機能を準備
するリクエストヘッダー情報
を設定するリクエストを送信する

<script type="text/javascript">
	function login(){
		//获取用户名的值
		var username = document.getElementById("username").value;
		//获取密码的值
		var password = document.getElementById("password").value;
		//创建ajax的核心对象
		var xhr = new XMLHttpRequest();
		//发送请求的准备工作
		xhr.open("POST","/login",true); 
		//准备监听函数，监听请求状态的改变和状态码的值
		xhr.onreadystatechange = function(){
			//4代表后台响应完毕，200代表响应码成功			
			if(xhr.readyState==4&&xhr.status==200){
				//返回后台相应的数据
				var text = xhr.responseText;
				if("true"==text){
					alert("成功");
				}else{
					alert("登陆失败!!用户名或者密码错误!!");
				}
			}
		}
		//使用ajax的post提交，你要让后台传递参数，你还得设置请求头信息
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//传递的参数是以普通文本传输的
		//准备参数
		var param = "username="+username+"&password="+password;
		//发送请求
		xhr.send(param);
		//send的语法格式： xhr.send([param]);  注意：只有post提交传递参数才放到send方法内部
	}

	<form>
		username:<input type="text" id="username" name="username"><br/>
		password:<input type="text" id="password" name="password"><br/>
		<input type="button" onclick="login()" value="登陆">
	</form>