Ajax入门案例之get、post方式
get步骤:
a.创建异步的XMLHttpRequest对象。
b.设置监听:监听对象的状态的变化,触发一个函数。
c.打开链接。
d.发送数据。
代码:
<head>
<title>ajax的get请求</title>
<script>
function createXMLHttpRequest(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function myget() {
//1,创建一个异步请求对象
var xhr = createXMLHttpRequest();
//2,监听异步请求对象的状态
xhr.onreadystatechange = function () {
//有响应来了
if (xhr.status == 200) {
//响应成功
if (xhr.readyState == 4) {
//读取响应完成
//获取响应正文
var content = xhr.responseText;
console.log(content)
}
}
}
//3,打开连接
xhr.open("get","${pageContext.request.contextPath}/testGet?name=root",true);
//4,发送参数
xhr.send();
}
</script>
</head>
<body>
<button onclick="myget()">get异步请求</button>
</body>
post方式步骤:
a.创建异步的XMLHttpRequest对象。
b.设置监听:监听对象的状态的变化,触发一个函数。
c.打开链接。
d.设置请求头。
e.发送数据。
代码实现:
<head>
<title>ajax的post请求</title>
<script>
function createXMLHttpRequest(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function mypost() {
//1,创建异步请求对象
var xhr = createXMLHttpRequest();
//2,监听异步请求对象状态改变
xhr.readystatechange = function () {
if (xhr.status == 200) {
if (xhr.readyState == 4) {
var content = xhr.responseText;
console.log(content);
}
}
}
//3,打开连接
xhr.open("post","${pageContext.request.contextPath}/testPost",true);
//ajax的post请求本质是在模仿form表单的post请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//4,发送参数
xhr.send("name=root");
//get:查询,不安全
//post:增删改,安全
}
</script>
</head>
<body>
<button onclick="mypost()">post异步请求</button>
</body>