神马是Ajax
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
封装原生ajax函数
type：传值方式get post。
http://www.cnblogs.com/zhangpengshou/archive/2012/07/09/2583096.htmlRect机制
uri：要访问的服务器的地址
async:同步异步请求默认为异步操作若为同步操作，访问数据的时候，页面无法进行任何操作，呈现出一种假死状态；同步操作是相对安全的
obj：（相当于jq中的data属性
angular params:{}//get方式
data:{}//post）传递一个json对象进去（后端规定传递的数据:传递给后端的值）
fun:回调函数有返回数据时进行的操作
function ajax(type,url,async,obj,fun){
var str = "";
/*循环遍历传进来的json对象（遍历json都是用for in循环key代表后端规定传递的数据，obj[key]代表传递给后端的值）*/
for(var key in obj){
str += key + '=' + obj[key]+'&';
//拼接成类似uname=’admin’&upass=’123456’&
}
if(str!=""&&type=='get'){
//uname=’admin’&upass=’123456’&结尾处多了个&去掉它
url+="?"+str.substring(0,str.length-1);
//如果是get方式发送一个空的字符串，send（str）
str='';
}
var xhr;
//兼容ie低版本7以下
if(*window*.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP')
}
//async异步执行向服务器发送请求open
//基础配置信息open(method,uri,async)
/*method*：请求的类型；GET或POST
*url*：文件在服务器上的位置
*async*：true（异步）或false（同步）*/
xhr.open(type,url,async);
xhr.send(str);//将请求发送到服务器。Get传递空Post传递str字符串
xhr.onreadystatechange = function(){
//创建信息返回0 配置信息返回 1 发送信息完成返回 2访问数据结束返回4
/*xhr.statusHTTP协议状态码
xhr.status==200访问资源路径正确并且结束成功正确
xhr.status==304缓存路径
xhr.status==400请求参数错误(参数传少了)
xhr.status==404访问路径错误路（路径写错了）
xhr.status==500后台服务器错误*/
if(xhr.readyState==4&&xhr.status==200){
//responseText 获得字符串形式的响应数据。
var data=xhr.responseText;
//异常处理机制
try{
//JSON.parse将JSON字符串转换为对象
var e=JSON.parse(data);
}catch(s){
console.info(s); //抛出异常
};
fun(e);
}
}
}
调用ajax
var url = "后端提供的网址",
var obj = {
upass:页面获取的用户名，
upass:页面获取的密码，
}
ajax('get',url,true,obj,function(e){
if(e.code==200&&e.data){
alert('登陆成功');
window.location=index.html';
}else{
alert('对不起我们服务器挂掉了');
}
})
同源安全策略
是网景公司提出的一个著名的安全策略,只有在域名端口协议相同时才进行访问；
同源是指域名，协议，端口相同；
Jsonp跨域处理
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。Callback回调函数~~~
跨域原理：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。
function jsonp(url,data){
var param='';
for(var in data){
param+=i+'='+data[i]+'&';
}
//跟ajax一样，获取url后的一串字符串
url+='?'+param;
var domScript = document.createElement('script');
//创建一个script标签
domScript.src=url;
//给script标签添加地址,将script（带有src地址）插入到head中
document.getElementsByTagName('head')[0].appendChild(domScript);
}
//测试访问的是360天气，传递值会返回城市天气等等数据
var url="http://cdn.weather.hao.360.cn/api_weather_info.php";
var data={app:'hao360',code:101011200,_jsonp:"weath"}
jsonp(url,data);
function weath(e) {
var weathArr=e.weather;
var dayWeath=[];
var nightWeath=[];
var dateArr=[]
for(var i=0;i<weathArr.length;i++){
var everyday=weathArr[i];
dayWeath.push(everyday.info.day[2]);
nightWeath.push(everyday.info.night[2]);
dateArr.push(everyday.*date*.substring(5));
}
}
//script标签引用的内容我们获取不到，则返回一个自动运行的函数；
//由前端给后端传递函数名
Jquery中的ajax
常用方法
load(url,[data]，[callback])常用于远程将html代码插入dom元素中
url:(必填)请求html页面的url地址、
若data为空则为get方式传值，否则post方式
如$(‘#demo’).load(‘text.html’)将text页面的内容加入到id为demo的div中，
注意：load（）方法 无论Ajax请求是否成功，只要当请求完成后，回调函数就被触发
$.get(url,[data],[callback],[type])以get方式进行ajax请求
Type：服务器端返回内容的格式（xml，html，script·，json，text）
Callback函数
function(e,textStatus){
//e:返回的内容
//请求数据返回的状态有success error
}
$.post()以post方式进行ajax请求
Get方式跟post方式的区别get方式对传输的数据大小有限制（通常不能大于2kb），get方式请求的数据会被浏览器缓存起来，其他人可以从浏览器的历史记录中取得这些数据，安全性差。
$.getJSON()用于加载json文件
最麻烦但最正宗的方法：
$.ajax(
{
type:’get’,
url:’’,
success:function(e){
}
}
常用参数：url，type：请求方式（get/post），
data：传json对象后者string字符串 建议传json对象 好理解一点；
注意：
1、如果在ajax外部获取ajax的数据,必须使用全局变量来进行定义
2、ajax后添加进来的数据 如果 想绑定事件，一般使用事件委托jq的on（）方法
网友评论