一.原生的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.jianshu.com/search?q=1&page=1&type=notes
//http://www.jianshu.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.jianshu.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="//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');
}
});
})
网友评论