一.原生的ajax封裝
function ajax(data) {
//data={data:"",dataType:"xml/json",type:"get/post",url:"",asyn:"true/false",success:function(){},failure:function(){}}
//data:{username:123,password:456}
//data = 'username=123&password=456';
//第一
var ajax =null;
if (window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject();
}
//第二
var type = data.type =='get'?'get':'post';
var url = '';
if(data.url){
if(type == 'get'){
`注意事項－－－get請求的參數的拼接`
url += "?" + data.data + "&_t="+new Date().getTime();
//http://www.lxweimin.com/search?q=1&page=1&type=notes
//http://www.lxweimin.com
//url += "/search?" + 'q=1' + "&page=1&type=notes";
}
}
var flag = data.asyn == 'true'?'true':'false';
ajax.open(type,url,flag);
//第三
if (type == 'get'){
ajax.send(null);
}else if(type == 'post'){
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(data.data);
}
//第四
ajax.onreadystatechange = function () {
if(this.readyState == 4){
if (this.status == 200){
if(typeof data.success == 'function'){
var d = data.dataType == 'xml'?ajax.responseXML:ajax.responseText;
data.success(d);
}
}else {
if(typeof data.failure == 'function'){
data.failure();
}
}
}
}
}
原生的ajax的調用
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var param = {
url:"http://www.lxweimin.com",
type:'get',
dataType:'son',
success:function (data) {
alert(data);
alert(1);
}
};
ajax(param);
}
}
二.jquery的ajax
2.1 jquery的語法
屏幕快照 2016-07-21 下午4.00.05.png
＊＊＊＊ jquery的ajax的應用
<body>
<input type="button" value="提交" id="btn">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js">
</script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//alert(1);
$.ajax({
url:"http://192.168.10.121/JZ/index.php/Home/Login/dologin.html?name=18329042980&pwd=123",
dataType:"json",
type:"get",
success:function(data){
alert(data);
},
error:function(e){
alert('error');
console.log(e);
}
})
});
});
</script>
</body>
三. function講解
function函數(普通函數、匿名函數、閉包函數)的講解
http://www.cnblogs.com/polk6/p/3284839.html
function函數的補充
javascript代碼的執行過程
1）預解析：把所有的函數定義提前，所有的變量的聲明提前，變量賦值不提前。所以函數可以先調用后定義。
2）執行:從上到下執行
函數的閉包：
<script type="text/javascript">
function fn1() {
var n = 1;
var fn2 = function () {
n ++;
console.log(n);
};
return fn2;
}
var fn3 = fn1();
fn3();//輸出2
fn3();//輸出3
fn3();//輸出4
</script>
閉包的應用：for循環不存在作用域的問題（全局和函數存在作用域的問題）
var data = [];
for(var i = 0; i < 3;i++){
data[i] = function () {
console.log(i);
}}
//此時i＝3；
data[0]();//輸出為3
data[1]();//輸出為3
data[2]();//輸出為3
對比如下代碼：輸出0 1 2
var data = [];
var i = 3;
for( i = 0; i < 3;i++){
data[i] = (function (k) {
return function () {
console.log(k);
}
})(i);
}
data[0]();//輸出0
data[1]();//輸出1
data[2]();//輸出2
例如：調用function的方式
function add(k) {
this.k = k;
this.product = function () {
console.log(this.k+'jia');
alert(1);
}
}
//1.沒有輸出
//add('1');
// 2.Uncaught TypeError: ad is not a function
// var ad = add('ni');
//ad();
//3.正確的調用方法
var ad =new add('you');
ad.product();
四.ajax的跨域問題
http:// —— 協議
www —— 子域名
abc.com —— 主域名
8080 —— 端口號
scripts/jquery.js —— 請求資源地址
其中當 協議 子域名 主域名 端口號 中任意一個不同是都算作不同域。
4.1 ajax跨域的問題
1.出于安全考慮 瀏覽器不允許ajax跨域獲取數據
2.可以通過script的src加載js的方式傳遞數據
4.2 jsonp的案例
前端代碼
//callback的函數名可以定制變為cb，下面的script里面變為cb；后端代碼不需要變動
<script type="text/javascript">
function callback(data){
console.log(data);//此處為解析數據
}
//callback(["zhangsan","lisi","wangwu"]);與下面的script的代碼效果一至
</script>
<script type="text/javascript" src="jsonp.php?_jsonp=callback"></script>
后端代碼jsonp.php：
<?php
$callback = $_GET['_jsonp'];
$arr = array("zhangsan","lisi","wangwu");
echo $callback."(".json_encode($arr).")";
?>
4.3 jquery的jsonp
$(function(){
$.ajax({
type:"get",
async:false,
url:"./jsonp.php",//調用后拼接為"./jsonp.php?_jsonp=callback"
dataType:"jsonp",
jsonp:"cb",//相當于_jsonp
jsonpcallback:"callback",//相當于callback
success:function(json){
console.log(json);
},
error:function(){
console.log('fail');
}
});
})