如何使用ajax

==> 学习汇总(持续更新)
==> 从零搭建后端基础设施系列(一)-- 背景介绍


ajax很强大,所以学会使用它是很有必要的。根据w3c官网的手册,可以总结出如何简单的使用ajax.

步骤如下:
一.创建ajax对象(XMLHttpRequest 对象)
为了ie浏览器,创建对象的代码如下:

var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

二.打开服务器,发送数据
这里需要用到两个方法open()和send()
open() 方法需要三个参数:
1.定义发送请求所使用的方法(GET 还是 POST)
2.规定服务器端脚本的 URL。
3.规定应当对请求进行异步地处理。true表示异步处理,false表示同步处理,但是99%都是true.
send() 方法可将请求送往服务器.

例如:
GET方式请求:
1.url是文本文件

var method = 'GET';
var url = path+filename;
oAjax.open(method,url,true);
oAjax.send();

这样就可以获取到txt文件中的内容
2.url是服务器文件

var method = 'GET';
var url = abc.php?name1=value1&name2=value2;
oAjax.open(method,url,true);
oAjax.send();

这样就能把数据传送给服务器。

POST方式请求:
1.url是文本文件

var method = 'POST';
var url = path+filename;
oAjax.open(method,url,true);
oAjax.send();

这样就可以获取到txt文件中的内容
2.url是服务器文件

var method = 'POST';
var url = abc.php;
var data = name1 + '=' + value + '&' + name2 + '=' + value2; //要发送的数据
oAjax.open(method,url,true);
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");//这一步一定不能忘.
oAjax.send(data);

三.接收返回数据
有一个回调函数是处理返回的数据的,onreadystatechange.
例如:

 //接收返回,当服务器有东西返回时触发
    oAjax.onreadystatechange = function ()
    {
        //readyState:0:请求未初始化,1:请求已退出,2:请求已发出
        //3:请求处理中,4:请求完成
        //status=200的时候OK,404:未找到页面
        if(oAjax.readyState == 4 && oAjax.status == 200)
        {
            var text = oAjax.responseText; //返回的文本数据
        }
    }

最终就是要获取oAjax.responseText返回的数据了.然后就可以利用DOM编程,把数据更新到指定的元素内.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值