java 原生 get请求 原生js发送get请求

Ajax

一、原生js的Ajax

1、get请求：

具体步骤如下

1. 创建一个HTTP请求的对象：**var req=new XMLHttpRequest()**对象（核心）
2. 回调方法（最后执行）但是必须先要创建（req.onreadystatechange=function(){这里面是执行的结果的状态和返回的参数处理}）
3. 设置要发送的地址和参数var url=发送的地址加参数
4. 设置发送的方式req.open(“get”,url,true) 这里的true：主要是确定是异步请求
5. 发送请求req.send()

eg：验证用户信息的合法性

<td class="font3 fftd">登录名：<input name="userLoginName"  id="loginName" size="20" onblur="checkLoginName()"/>
				<span id="spanLoginName"></span>
			</td>

下面建立一个基于原生的js的Ajax的验证

function checkLoginName() {
			var loginName = document.getElementById("loginName").value;
			//判断用户是否输入有值
			if(loginName==""){	//用户没有输入值，给span标签的值"登录名不能为空"，并位红显示
				document.getElementById("spanLoginName").innerText="登录名不能为空";
				document.getElementById("spanLoginName").style.color="red";
				return flag;
				//不为空时
			}else{//发送异步请求
				//1、创建一个异步对象（核心，也就是HTTP请求）
				var xrs=new XMLHttpRequest();
				//2、设置回调函数
				xrs.onreadystatechange=function () {
				//异步对象请求完毕之后，自动调用
					if(xrs.readyState==4&xrs.status==200){
						//获取服务器的相应（字符串）
						var result=	xrs.responseText;
						if(result=="true"){
							document.getElementById("spanLoginName").innerText="用户已存在";
							document.getElementById("spanLoginName").style.color="red";
							return flag;
						}else {
							document.getElementById("spanLoginName").innerText="√";
							document.getElementById("spanLoginName").style.color="green";
							return true;
						}
					}
				}
				//3、设置要发送的的地址
				var url="UserServlet?action=checkloginname&loginName="+loginName;
				//4、设置发送方式{true：表示异步请求；false：同步请求}
				xrs.open("get",url,true);
				//5、发送
				xrs.send();
			}
		}

**（1）**上面代码中涉及了几个重要的东西，在回调函数中有5个请求状态，和2个响应状态，只有4和200同时满足时，才能判断一次完整的请求成功

**（2）**对于发送的方式和发送也要注意以下几点

**（3）**得到服务器的响应（第二种基本已经淘汰）

2、post请求（基本和get一致）

相同点：创建核心对象，和回调函数是一样的
不同点：设置发送数据和参数有所改变

//先是得到发送的参数
var date="action=checkloginname&loginName="+loginName;
//得到要发送的地址
var url="Userservice";

//4、设置发送方式,这里只是将地址传到发送的方式中（不带参数）
xrs.open("post",url,true);

//（Post请求）模拟表单请求，设置一个请求
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

//5、发送，将要发送的数据传到发送中作为参数
xrs.send(date);

二、Jquery版的Ajax

1、post请求的Ajax

1.1、标准版的post

$.ajax({
	url:"/User_query",//发送的地址
	data:"action=changeState/"+id+"&"+state,//发送的要传输的数据
	dataTypy:"text",//返回数据的类型，这里是文本形式
	type:"post"//发送的方式（get和post）
	success:function(result){//成功后执行的方法：这里的result是返回的结果数据
		alert(result);
	}
});

1.2、简易版的post

$.post("/User_query",""action=changeState/"+id+"&"+state,/",function(result){//回调函数提前
	alert(result);
},"text");

2、get请求的Ajax

1.1、标准版的get

和post一样，只需将"post"换成“get”即可

$.ajax({
	url:"/User_query",//发送的地址
	data:"action=changeState/"+id+"&"+state,//发送的要传输的数据
	dataTypy:"text",//返回数据的类型，这里是文本形式
	type:"get"//发送的方式（get和post）
	success:function(result){//成功后执行的方法：这里的result是返回的结果数据
		alert(result);
	}
});

1.2、简易版的get

也和post一样，只需将“post”改变成“get”即可

$.get("/User_query",""action=changeState/"+id+"&"+state,/",function(result){//回调函数提前
	alert(result);
},"text");