xhr如何发送post请求_ajax-如何发送ajax请求

什么是ajax？

Asynchronous JavaScript and XML

也就是异步的JavaScript和XML

ajax的使用场景

前台获取数据

表单失焦验证

我们需要了解post和get区别

get参数是在地址栏中，大小2000个字符左右

post参数是在请求体中，网速良好，理论上是无限大的

如何构建一个完整的ajax请求

注意：一般情况下只能在有服务的环境下发送请求

ajax是局部刷新

1.创建ajax对象

var xhr = new XMLHttpRequest();    新版本的浏览器

var xhr = new ActiveXObject("Microsoft.XMLHTTP");   老版本的IE

兼容写法：

varxhr;if(window.XMLHttpRequest){ //常规，如果有，直接使用

xhr = newXMLHttpRequest();

}else{ //如果没有，老版本IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

这里我们需要先了解状态码和回应码

xhr.status可获取响应码

xhr.readyState可获取状态码

xhr.responseText可以获取响应文本

状态码：

•0: 请求未初始化

•1: 服务器连接已建立

•2: 请求已接收

•3: 请求处理中

•4: 请求已完成，且响应已就绪

响应码：

1xx   信息类

2xx   成功     200

3xx   重定向    304

4xx   客户端错误   404

5xx   服务端错误

2.绑定监听函数

xhr.onreadystatechange = function(){

当xhr.readyState == 4 || xhr.status== 200时

可以获取xhr.responseText响应文本

然后通过响应文本来执行要求

}

3.创建请求的消息，连接服务器      此时状态码由0变成了1

xhr.open('提交方式：get或post','链接地址',bool值);

boll为true异步；false同步

4.发送请求

xhr.send(null);

如果是post请求，就放post参数，如果是get请求，发送null就行了

这样就是一个完整的ajax请求了

实例：

使用ajax发送get请求

html结构如下

用户名：

密码：

验证用户名

var username = document.getElementById("username");var btn = document.getElementById("btn");var ts= document.getElementById("ts");//点击btn发送ajax请求

btn.onclick =function(){//1.创建xhr

varxhr;if(window.XMLHttpRequest){ //常规，如果有，直接使用

xhr = newXMLHttpRequest();

}else{ //如果没有，老版本IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}//2.绑定监听函数

xhr.onreadystatechange =function(){if(xhr.readyState == 4){if(xhr.status == 200){

console.log(xhr.responseText)if(xhr.responseText == 1){

ts.innerHTML= "该用户名已经被注册"}else if(xhr.responseText == 0){

ts.innerHTML= "该用户名可以使用"}

}

}

}//3.建立连接

xhr.open("GET","08.php?uname=" + username.value,true);//正则验证//4.发送请求

xhr.send(null)

}

然后用PHP模拟一个数据库

$db= ['jack','mack','mary']; //模拟数据库

$username = $_GET['uname']; //表示从前台传递过来的参数

$flag= false;foreach($db as$n){if($n ===$username){

$flag= true;break;

}

}if($flag){

echo"1";

}else{

echo"0";

}?>

使用ajax发送post请求

html代码：

学生姓名：
学生成绩：

注册

}var uname = get_id("uname");var score = get_id("score");var btn = get_id("btn");var p01 = get_id("p01");btn.οnclick=function(){//1.

varxhr;if(window.XMLHttpRequest){ //常规，如果有，直接使用

xhr = newXMLHttpRequest();

}else{ //如果没有，老版本IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}//2.

xhr.onreadystatechange =function(){if(xhr.readyState == 4){if (xhr.status == 200) {

p01.innerHTML=xhr.responseText;

}

}//3.

xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);//3.5 在发送post请求的时候，你得告诉服务器你发送的是一个什么

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//4.发送

xhr.send('strName=' + uname.value + '&strScore=' +score.value);

}

}

php代码：

$uName= $_POST['strName'];

$uScore= $_POST['strScore'];//此时，php已经拿到了学生的名字和分数//存到数据库

$output= $uName.'-'.$uScore.'-'.uniqid();

echo $output;?>