AJAX之原生ajax
程序员文章站
2022-07-12 19:10:07
...
AJAX(Asynchronous JavaScript And XML)即异步javascript和xml,并不是一门语言,而是一种用于创建快速动态网页的技术。无需重新加载整个网页的情况下,即可更新部分网页。
原生ajax的四步操作:
* 创建核心对象
* 使用核心对象打开服务器之间的连接
* 发送请求
* 注册监听,监听浏览器的响应
核心对象类: XMLHTTPRequest
open(请求方式,请求的地址,是否需要异步)
send(请求体)
onreadystatechange:监听事件,它会在核心对象的状态发生改变的时候自动被调用
readyState:当前核心对象的状态,取值范围为1~4,4表示服务器相应结束
status:服务器响应的状态码,只有当服务器响应结束之后才会有,200表示请求成功
responseText:获取服务器响应的响应体
现在来看看原生ajax怎么写吧:
1.get方法
<script type="text/javascript">
window.onload = function(){
//获取按钮标签对象
var btn = document.getElementById("btn");
//绑定事件
btn.onclick = function(){
//请求数据
//1.创建请求核心对象
var xhr = null; //处理兼容问题
//异常处理:try-catch
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.与服务器建立连接
//get的特点:将数据拼接到url中
//请求方式,请求的服务器地址,是否需要异步
//注意:如果数据中有中文,则向服务器发送之前需要进行编码【字符类型 的数据转化为字节类型的数据】
xhr.open("get", "http://localhost/ajaxGet.php?usr=" + encodeURI("示例") + "&age=20&pwd=abc123", true);
//3.发送连接请求
xhr.send();
//4.监听,监听服务器的响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert("数据请求成功!");
alert(xhr.responseText);
}else{
alert("数据请求失败!");
}
}
}
}
}
</script>
2.post方法
<script type="text/javascript">
window.onload = function(){
//获取按钮标签对象
var btn = document.getElementById("btn");
//给按钮绑定事件
btn.onclick = function(){
//请求数据
//1.创建请求核心对象
//处理兼容问题
var = xhr = null; //处理兼容问题
//异常处理
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.与服务器建立连接
//请求方式,请求的服务器地址,是否需要异步
//注意:如果数据中有中文,则向服务器发送之前需要进行编码【字符类型的数据转换为字节类型的数据】
xhr.open("post", "http://localhost/ajaxpost.php", true);
//3.发送连接请求
//设置数据的编码格式,固定写法【请求头】
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//设置需要发送的数据【请求体】
var str = "user=leesoar&age=20&pwd=123";
xhr.send(str);
//4.监听,监听服务器的响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert("数据请求成功!");
alert(xhr.responseText);
}else{
alert("数据请求失败!");
}
}
}
}
}
</script>