原生AJAX请求实例教程_vlambda技术博客

什么是Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，可以不重新加载整个网页通过刷新网页部分内容达到数据的更新展示。

可以有效的降低对带宽的需求，提高网页的性能；Ajax有同步和异步两种实现方式。

Ajax实例代码

前端代码--使用get请求

<html>
    <body>
        <div class="seodd"></div>
    </body>
    <script>
        var seodd = document.getElementById('seodd');
        var seodd = new XMLHttpRequest();//创建ajax对象
seodd.onreadystatechange = function(){
if(this.readyState == 4){//4代表得到所有数据响应
if(this.status == 200){//服务端200，响应完成
success(this.responseText);
}
}
}
var url='';//数据提交地址
seodd.open('get',url,true);//true为异步;false为同步
seodd.send();
function success(data){
data = JSON.parse(data);//json转OBJ
seodd.innerHTML = data.zan;//修改dom数据,.zan取决于后端传递多来的json数据中的参数名
}
    </script>
</html>

前端代码--使用post请求

<html>
    <body>
        <form class="seodd"><input name="seodd"></form>
    </body>
    <script>
        var seodd = document.getElementById('seodd');
        var seodd = new XMLHttpRequest();//创建ajax对象
        seodd.setRequestHeader('content-type','application/x-www-form-urlencoded');
seodd.onreadystatechange = function(){
if(this.readyState == 4){//4代表得到所有数据响应
if(this.status == 200){//服务端200，响应完成
success(this.responseText);
}
}
}
var url='';//数据提交地址
seodd.open('post',url,true);//true为异步;false为同步
seodd.send('name=seoddcn');
function success(data){
data = JSON.parse(data);//json转OBJ
seodd.innerHTML = data.seodd;//修改dom数据,data.seodd的seodd取决于后端传递多来的json数据中的参数名
}
    </script>
</html>

在Ajax进行post请求的时候比起get请求，需要设置请求头“setRequestHeader('content-type','application/x-www-form-urlencoded');”；同时XXX..send(),get请求直接为空即可，对于post请求则是需要把请求参数写在里面。

后端代码

$data=array(
"seodd"=>$a //将需要返回给前端的数据以数据的形式
);
echo json_encode($data);//将数据转化成一个json格式的数据

原生AJAX请求实例教程

原创分享共同成长

○

SEO优化|网站建设|小程序

潘某人SEO

www.seodd.cn

记录分享一个零基础小白的建站&SEO自学之路

vlambda博客
学习文章列表