Ajax
Ajax
1.特点:更新部分网页, 可使因特网应用程序更小、更快，更友好。
2.很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
3.所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
4.XMLHttpRequest 用于在后台与服务器交换数据。
5.同源策略的影响，当在某一域名下请求其他域名，或者同一域名，不同端口下的url时，就会变成不被允许的跨域请求。
6.原生js（没有jQuery和ajax支持）的情况下，弹出一个同源限制的错误，意思就是你无法跨域请求url的数据。
7.jsonp
ajax请求，dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式。如果服务端返回的是普通json对象。那么调试的时候，在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误；在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误。
<script type="text/javascript"> /*为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：*/ /*当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。*/ /*0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪*/ //ajax异步请求本地json数据 var htp; if(window.XMLHttpRequest) { htp = new XMLHttpRequest(); } else { htp = new ActiveXObject(); } //弹出一个同源限制的错误 htp.open("GET", "http://www.toutiao.com/stream/widget/local_weather/data/?city=英德", true); htp.send(); htp.onreadystatechange = function() { if(htp.readyState == 4 && htp.status == 200) { console.log(htp.responseType); } } </script>
<body> <!--script跨域--> <!--<script type="text/javascript"> // var data=[]; function callbackfunction(data){ console.log(data.responseText); } </script> <script src="http://www.toutiao.com/stream/widget/local_weather/data/?city=英德?callback=callbackfunction"></script> --> <!--jq跨域，要浏览器支持跨域，你的地址也要支持跨域--> <script src="js/jquery-2.1.0.js"></script> <script> $(function() { $.get('http://www.toutiao.com/stream/widget/local_weather/data/?city=英德', function(data) { console.log(data); }) }) </script> </body>
<script src="js/jquery-2.1.0.js" type="text/javascript"></script> <script type="text/javascript"> //js方法：ajax获取本地数据 var xmlhttp = new XMLHttpRequest();// xmlhttp.open("GET", "data.json", true);//传入绝对地址 xmlhttp.send();//发送请求 xmlhttp.addEventlist = function() { //如果到了第四部，状态为200表示成功拿到数据 if(this.readyState == 4 && this.status == 200) { var myObj=[]; myObj = JSON.parse(this.responseText); // consol.log(myObj); } }; //jq方法:ajax获取本地数据 /* $.ajax({ type:"GET",//获取方式 url:"data.json",//获取地址 dataType:"json",//返回数据格式 success:function(data){//回调函数 for(var i=0;i<data.length;i++){ console.log(data[i].area); } } }); */ //ajax获取后台数据，你的地址支持跨域,dataType:"jsonp"解决浏览器跨域问题 $.ajax({ type:"GET",//获取方式 url:"http://www.toutiao.com/stream/widget/local_weather/data/?city=英德",//获取地址 dataType:"jsonp",//返回数据格式 success:function(data){//回调函数 console.log(data) } }); </script>
