文章原址https://www.cnblogs.com/cnyaokai/p/6617320.html
这是我看到的写的最详细的、最浅显易懂、最用心地
一、ajax基础语法
1.1写法
$.ajax({
url:'地址',
data:{
参数:xxx,
参数:xxx
},
type:'POST/GET',
success:function(str){ //成功回调函数
alert(str);
},
error:function (err){ //失败回调函数
alert(err);
}
});其中，data:{}是传输数据用的，后台的PHP程序接收并处理对应的数据。
例：
$('.login').click(function (){
$.ajax({
url:'post.php',
data:{
user:$('.user').val(),
pass:$('.pass').val()
},
type:'POST',
success:function(str){
alert(str);
},
error:function (err){
alert(err);
}
});
});
此段代码，传输了用户输入的用户名和密码。
PHP的处理：
<?php
$user=$_POST["user"];
$pass=$_POST["pass"];
if($user=="abc"&&$pass=="123"){
echo "登录成功";
}else{
echo "用户名或者密码错误";
}
?>
校验用户名和密码，并返回对应的结果。
1.2上传数据：onload
HTML:
<input type="file" />JAVASCRIPT:
window.onload=function (){
var oInp=document.body.children[0];
oInp.onchange=function (){
SomeJavaScriptCode;
}
};
1.3 ajax交互分4步
1）填写地址
2）返回结果
3）解析结果
4）展示数据
二、ajax的应用
1.仿爱奇艺官网『今日焦点』板块的红框部分（简版）
制作要求：用ajax方式传输数据到页面（自制一个假数据库）
涉及部分知识点：eval 字符串转数组 *eval 解析json有问题 必须加括号
HTML代码如下：
<ul></ul>
*版本1：每行只有一个标题
假数据库a.txt写法：
[{href:"http://www.baidu.com/",img:"img/4.jpg",text:"文字介绍111"},{href:"http://www.taobao.com/",img:"img/8.jpg",text:"文字介绍222"},{href:"http://www.taobao.com/",img:"img/8.jpg",text:"文字介绍222"}]
jQ代码如下（写在<ul>下面，body里面）：
$.ajax({
url:'a.txt',
success: function(str){
var arr=eval('('+str+')'); //把字符串转成数组
// alert(typeof str);
$(arr).each(function(index, element) { //循环有多少条数据
//有多少条数据就创建多少个li
$('<li>'
+'<a href="'+$(arr).get(index).href+'">'
+'<img src="'+$(arr).get(index).img+'" />'
+'<p>'+$(arr).get(index).text+'</p>'
+'</a>'
+'</li>').appendTo('.ul1');
});
}
});
——————————我是拓展内容的分割线——————————
如果HTML里面有多个 <ul></ul> ，现在想在多个 <ul></ul> 里面插入不同的内容，如果不封装的话是这样来实现的：
$.ajax({
url:'a.txt',
success: function(str){
var arr=eval('('+str+')'); //把字符串转成数组
$(arr).each(function(index, element) { //循环有多少条数据
//有多少条数据就创建多少个li
$('<li>'
+'<a href="'+$(arr).get(index).href+'">'
+'<img src="'+$(arr).get(index).img+'" />'
+'<p>'+$(arr).get(index).text+'</p>'
+'</a>'
+'</li>').appendTo('.ul1');
});
}
});
$.ajax({
url:'b.txt',
success: function(str){
var arr=eval('('+str+')'); //把字符串转成数组
$(arr).each(function(index, element) { //循环有多少条数据
//有多少条数据就创建多少个li
$('<li>'
+'<a href="'+$(arr).get(index).href+'">'
+'<img src="'+$(arr).get(index).img+'" />'
+'<p>'+$(arr).get(index).text+'</p>'
+'</a>'
+'</li>').appendTo('.ul2');
});
}
});
这样写两遍相同的代码，代码就过于冗长。这时就需要把两段代码封装起来。
封装需要制定函数的名字（方便调用），需要指定给函数传那些参数（obj和url）。
封装之后的写法：
<script>
function newsList(obj,url){
$.ajax({
url:url,
success: function(str){
var arr=eval('('+str+')'); //把字符串转成数组
$(arr).each(function(index, element) { //循环有多少条数据
//有多少条数据就创建多少个li
$('<li>'
+'<a href="'+$(arr).get(index).href+'">'
+'<img src="'+$(arr).get(index).img+'" />'
+'<p>'+$(arr).get(index).text+'</p>'
+'</a>'
+'</li>').appendTo(obj);
});
}
});
}
newsList('.ul1','a.txt');
newsList('.ul2','b.txt');
</script>
封装了函数，如果想执行，就调用并向里面传参数obj和url，传两次就执行了两次。
—————————————拓展完毕—————————————
*版本2：每行有多个标题，在数据库中两个新闻的标题和内容是写在一个json里面的，把这一个json拆分，并分成多个标题显示在页面上。
假数据库a.txt写法：（不允许手动换行，只能自动换行，这里为了阅读方便使用了手动换行）
[{href:"http://www.baidu.com/",text:"男子被骗子追债"},
{href:"http://www.baidu.com/",text:"男子被骗子追债"},
{href:"http://www.baidu.com/",text:"男子被骗子追债"},
{href:"http://www.baidu.com/",text:"男子被骗子追债"},
{href:["http://www.baidu.com/","http://www.jd.com/","http://www.taobao.com/"],text:["男子被骗子追债","男子被骗子追债2","男子被骗子追债3"]}]
jQ代码：
$.ajax({
url:'a.txt',
success: function(str){
var arr=eval('('+str+')'); //把字符串转成数组
$(arr).each(function(index, element) { //循环有多少条数据
//有多少条数据就创建多少个li
var oLi=$('<li></li>').appendTo('ul');
// alert(typeof $(arr)[index].href); 弹出每项的数据类型，如果只有一项就是字符串，有两项就是object
if(typeof $(arr)[index].href=='string'){
$('<a href="'+$(arr)[index].href+'">'+$(arr)[index].text+'</a>').appendTo(oLi);
}else{
var arrHref=$(arr)[index].href;
for(var i=0; i<arrHref.length; i++){ //循环下标
$('<a href="'+$(arr)[index].href[i]+'">'+$(arr)[index].text[i]+'</a>').appendTo(oLi);
}
}
});
}
});
在14行循环下标的时候使用了js的for循环，而没有使用jQ的each循环，因为for循环更容易看懂，使用each会添加i , k两个新变量，理解起来的难度会增加一些。使用each的写法如下：
$.ajax({
url:'a.txt',
success: function(str){
var arr=eval('('+str+')');
$(arr).each(function(index, element) {
var oLi=$('<li></li>').appendTo('ul');
if(typeof $(arr)[index].href=='string'){
$('<a href="'+$(arr)[index].href+'">'+$(arr)[index].text+'</a>').appendTo(oLi);
}else{
var arrHref=$(arr)[index].href;
$(arrHref).each(function(i, k) {
$('<a href="'+k+'">'+$(arr)[index].text[i]+'</a>').appendTo(oLi);
});
}
});
}
});
2.仿爱奇艺banner图部分（简版）
3.仿微博热门话题的部分（简版）
要点：点击换一换按钮之后，要从数据库中随机抽出一些内容来展示，需要用到随机数的方法。
HTML代码：
<input class="change" type="button" value="换一换" />
<ul></ul>
jQ代码：
function change(){
$.ajax({
url:'b.txt',
success: function(str){
$('ul').html(''); //先清空，在添加，否则每次添加都会添加到原有内容的后面了
var arr=eval('('+str+')');
arr.sort(function (){
return Math.random()-0.3;
});
for(var i=0; i<3; i++){
$('<li><a href="'+$(arr)[i].href+'">'+$(arr)[i].text+'</a><span>'+$(arr)[i].count+'</span></li>').appendTo('ul');
}
}
});
}
change(); //这句的意思是：在打开网页的时候就运行一次change函数，否则在刚打开网页的时候页面是空白的，需要点击一下才可以加载内容。
$('.change').click(change);
三、jsonp基础语法
jsonp的作用：从别人的服务器获取数据，就用jsonp方法
例如：让用户通过微信账户登录自己的APP、让用户通过微博账号登录自己的网站，我们就可以用jsonp的方法来从微博/微信的服务区获取需要的信息。
举例：在百度的搜索框，输入关键词之后，会自动弹出其他推荐的联想词。我们来看看这个联想词的数据是从哪里调用出来的。
通过su?wd=……这个文件我们可以看到，比如我们搜索关键字a，百度就会从 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1452_21125_19898_20929&req=2&csor=1&cb=jQuery110209266088668740502_1490508233752&_=1490508233755
这个地址来调用a相关的联想词。
打开这个网址，显示的信息如下：
精简一下这个网址，提取出我们想要的联想词信息。
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1452_21125_19898_20929&req=2&csor=1&cb=jQuery110209266088668740502_1490508233752&_=1490508233755
其中，wd=a的意思是关键词是a，删除蓝字部分，让最后的cb=show
网址精简成：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
cb就是callback的缩写，是返回的数据，这里我们把这个返回的数据命名为show
访问这个网址，显示如下：
让页面弹出联想词，我们可以使用如下语句：
<script>
function show(json){
alert(json.s);
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show"></script>第六行的作用就是调用show函数，相当于在线版本的show（）。
几个json原生写法及jQ写法的例子
1.显示关键字成龙的联想词
<script>
window.sogou={
sug:function (){
alert(arguments[0][1]);
}
}
</script>
<script src="https://www.sogou.com/suggnew/ajajjson?key=成龙&type=web"></script>
2.利用搜狗的数据，制作一个实时的搜索联想词显示页面
<body>
<input type="text" value="" id="txt" />
<ul id="ul"></ul>
<script>
var oTxt=document.getElementById('txt');
var oUl=document.getElementById('ul');
window.sogou={
sug:function (arr){
for(var i=0; i<arr[1].length; i++){
var oLi=document.createElement('li');
oLi.innerHTML=arr[1][i];
oUl.appendChild(oLi);
}
}
};
oTxt.oninput=function (){
oUl.innerHTML='';
var oS=document.createElement('script');
oS.src='https://www.sogou.com/suggnew/ajajjson?key='+oTxt.value+'&type=web';
document.body.appendChild(oS);
}
</script>
</body>
3.利用jQ弹出百度搜索的a的联想词
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{
wd:'a'
},
jsonp:'cb',
dataType:'jsonp',
success: function(json){
alert(json.s);
}
});
4.利用jQ弹出搜狗的联想词
$.ajax({
url:'https://www.sogou.com/suggnew/ajajjson',
data:{
key:'a',
type:'web'
},
dataType:'jsonp',
jsonp:'callBack',
success:function(){
},
error:function (){
}
});
四、字符串和json相互转换
4.1字符串转json
<script>
var str='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show';
var arr=str.split('?');
var url=arr[0];
var arr2=arr[1].split('&');
var json={};
for(var i=0; i<arr2.length; i++){
var arr3=arr2[i].split('=');
json[arr3[0]]=arr3[1];
}
console.log(json);
</script>
4.2json转字符串
<script>
//a=1&b=2
var json={a:1,b:2};
var arr=[];
for(var name in json){
arr.push(name+'='+json[name]);
//a=1,b=2
}
var str=arr.join('&');
alert(str);
</script>