ajax总结
2018-06-24 01:39:24来源:未知 阅读 ()
在平时的开发项目中,难免接触前端的知识,需要写接口,有时候用到js中的ajax跨越请求,总结了ajax的写法。
开始之前,需要准备两个文件,ajax.php ;ajax.html
1.ajax的基本步骤(ajax.php)
//1.创建对象
var ajax = new XMLHttpRequest();
// alert(typeof ajax);
//2.建立连接
ajax.open('get', 'ajax.php?id=5', true);
//3.发送请求
ajax.send();
//4.准备事件处理结果
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200) {
//请求: request
//响应: response
var res = ajax.responseText;
// alert(res);
document.write(res);
}
}
ajax,有同步异步的区别?异步:把小弟派出去了,什么时候回来,什么时候处理它,主程序继续执行,不会等待。同步:(比较少用)会在send这一步等待,主程序不会继续执行。method:请求的类型;GET 或 POST 。
2.ajax封装为函数(ajax.php)
<script> function get(url, func) { var ajax = new XMLHttpRequest(); ajax.open('get', url, true); ajax.send(); ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { var res = ajax.responseText; func(res); } } } //回调 + 匿名 get('1.php', function(res){ alert(res); }) get('ajax.php', function(res){ console.log(res); }) /* get('1.php', chuli); function chuli(res) { alert(res); } get('ajax.php', chuli2); function chuli2(res) { console.log(res); } */ </script>
这样封装好,就方便我们使用了,tp框架,ecshop,ecstore,都有自己的封装的ajax。
3.jq中的ajax请求(ajax.php)
$.ajax({ url: 'ajax.php?id=5', dataType: 'json', //指定返回数据的类型:xml, html, script, json, text, _default (不要骗他) type: 'get', //设置请求的类型:get(默认) post // data: 'name=123&age=18', //传输的数据(有两种格式) data: {age:8}, //传输的数据 async: true, //同步异步:true 默认异步 false 同步 success: function(res) { // alert(typeof res); // alert(res.id); alert(123); }, error: function(a){ alert('出错鸟~~~'); } });
4.ajax跨域问题(ajax.php)
协议、域名、端口这三个有任何一个不同,就跨域了。ajax本身是不可以跨域的,通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。
实现ajax的跨域请求,有几种方法,这儿写一种通过‘jsonp’,实现跨域的方法
<script type="text/javascript"> var url = 'http://localhost/other.php?act=get_article'; $.ajax({ type : "get", url :url, jsonp: "callbackparam", jsonpCallback:"jsonpCallback1", success : function(data){ var obj = eval(data); //处理接收到的数据 }, //end error:function(e){ alert("error"); } }); </script>
知识更新很快,学习很重要。当回过头,感觉这些很简单的时候,说明自己在进步,在成长...
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css命名规范
- 一位工作10年的前端总结的10个忠告 2020-06-08
- 前端如何学习? 2020-06-04
- CSS基础选择器总结 2020-05-27
- 12.居中总结 2020-04-17
- HTML URL与HTML总结 2020-03-31
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash