ajax

Posted 2020-09-19 飘然离去

 

　　

刚睡觉起来，有点无聊，写篇博客把，希望可以可以帮到Miss 桃哈哈

AJAX的全称是Asynchronous javascript And XML，AJAX技术基于Javascript和HTTP Request。异步的javascript和xml.

我们前后端交互的最主要的方式。

我们的网页当通过.html获取到网页dom的内容之后，剩下的几乎工作我们都通过ajax来完成，（不讨论websoct之类的）

我们今天来讨论下前后端交互的方式吧

1.用jquery库为例。

下面这个是我们经常用的方法。

$.ajax({ 
  type:\'get\', //这里有get,post,put,delete,input等方法。相信我只会用get和Post就可以了。
  url:\'http://www.www.daimajiayuan.com/rss\', 

  success:function(data,textStatus){ 
    $(\'.ajax.ajaxResult\').html(\'\'); 
    $(\'item\',data).each(function(i,domEle){ 
      $(\'.ajax.ajaxResult\').append(\'<li>\'+$(domEle).children(\'title\').text()+\'</li>\'); 
    }); 
  }, 
  error:function(){ 
    //请求出错处理 
  } 
}); 

get与Post方式的比较，get的参数会拼接在url的后边，类似，test.html!a=1&b=2&c=3之类的，post则不会，所以post方法比较安全点,查询数据库可以用get,其他的操作数据库走Post请求就行。但是get请求方式的Url最长不能超过了1024个字节，我记得好像，但是get方法返回的字节多少是没有限制的。

当然jquery还有其他的方法，类似，$.get,$,post,$.jsonp之类的，但是我们只要学会了上边的用法就可以了，这些方法的本质都差不多，上面的你学会了，慢慢的都学会了。

2.利用js原生的xhr做交互。（也是ajax的原理）

转载自：http://www.cnblogs.com/gaojun/archive/2012/08/11/2633891.html

 代码：

GET 请求

 	//JS
 	var xhr = XHR();
 	xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true);
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			alert(xhr.responseText);
 		}
 	};
 	xhr.send(null);
 	

POST 请求

 	//JS
 	var xhr = XHR();
 	xhr.open("post","test.php",true);
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			alert(xhr.responseText);
 		}
 	};
 	//比GET请求多了一步
 	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 	//另外,数据是通过send方法发送的
 	xhr.send("qs=true&userName=abc&pwd=123456");
 	

　解释：

var xhr = XHR();
	//open方法 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

xhr.open("get","test.txt",true);
	/*第一个参数是请求方式,一般用get与post方法,与form标签的method类似
	第二个参数是请求的URL
	第三个参数是请求是同步进行还是异步进行,true表示异步
	调用了open方法仅仅是传递了参数而已*/

xhr.onreadystatechange = callback;//在readystatechange事件上绑定一个函数
	//当接收到数据时,会调用readystatechange事件上的事件处理函数

xhr.send(null);//调用了send方法后才会发出请求

functon callback() {
		//在这里面没有使用this.readyState这是因为IE下面ActiveXObject的特殊性
		if (xhr.readyState == 4) {//readyState表示文档加载进度,4表示完毕
			alert(xhr.reponseText);//responseText属性用来取得返回的文本
		}
	}

3.通过jsonp来实现交互，（这个是可以跨域的，跨域的意思是说，你的网站上的请求可以跑到别的网站去获取数据） 

比如你的网站引入了一个<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>

通过script标签的引入一个Js,然后Js代码加载完成后自执行，就是jsonp的原理。（需要后端做一些配合）

随手写一个最简单的

<script>
function test(data){
    alert(data)
}


var url = "http://www.aa.com/sss.action?callback=window.test\';
var ss = document.createElement(\'script\');
ss.src = url;
document.body.appendChild(ss);

</script>
//后端给你返回的数据长这样
//window.test("haha,hellow world")