.ajax get,Ajax基本业务实现（GET请求）

实现效果：

客户端代码实现：

Insert title here

The Ajax Page

Ajax 表单请求

function doCheck(){

//在此函数中向服务端发起异步请求，检测name是否存在

//1.基于dom事件创建XHR对象

var xhr=new XMLHttpRequest();

//2.设置XHR对象监听状态

xhr.onreadystatechange=function(){

//onreadystatechange存储函数，每当readyState属性改变时，就会调用该函数

/*xhr.readyState == 状态 (0,1,2,3,4)

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中(通常现在可以从响应中获取内容头)。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。*/

if(xhr.readyState==4&&xhr.status==200){//请求完成并成功返回

document.getElementById("result").innerHTML=xhr.responseText;//获取响应数据

}

};

//3.创建与服务端的连接

var name=document.forms[0],name.value;

//console.log("name:",name);

xhr.open("GET","/doCheck",true);

//4.发送异步请求实现与服务端的通讯

xhr.send(null);//get请求send方法传值

}

服务端代码实现：package com.cy.ajaxcontroller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

//这是一个服务端,用来处理客户端的请求

@Controller

@RequestMapping("/")

public class AjaxController {

private List names=new ArrayList();

//假如这是存储数据的表

@RequestMapping("doSave")

@ResponseBody

//将客户端请求的数据name写入到names对应的集合

public String doSave(String name){

System.out.println("name="+name);

names.add(name);

return name+"save ok";

}

@RequestMapping("doCheck")

@ResponseBody

//通过此方法检验名字是否已经存在

public String doCheck(String name) {

if(names.contains(name))

return "名字:"+name+"已经存在，请选择其他名字";

return "名字："+name+"不存在，可以注册";

}

}