Ajax初识

最新推荐文章于 2024-09-16 08:47:17 发布

chuowutong8531

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量94

点赞数

文章标签： json 前端移动开发 ViewUI

原文链接：https://my.oschina.net/CppMonkey/blog/279869

版权

扯蛋

在这个星期，甚至说在这一段时间内，因为工作需要，一直都在学习前端开始知识，想想就比较苦恼，当我学C语言时，小伙伴们也在学，当我学C++时，小伙伴们在学Web开发知识，当我学Web开发知识时，小伙伴们已经在学移动开发知识，我这是总慢人一步的节奏么？不过我的根本和吃饭家伙还是习佳佳，其他都是附带的，好了，不扯远了，还是回归正题吧。

在本篇博文中，主要讨论的还是ajax的初级知识。首先，谈谈ajax是门什么技术，它出现的原因和背景是什么，接着，扯扯ajax内部结构是什么，在什么地方可以使用，最后，说一下它的使用。

背景

ajax的意思是Asynchronous Javascript And XML，取这四个单词的首字母拼凑而成，中文意思是异步js及xml（实际上现在使用的都是json而不是xml），咋一看，每个单词都认识，但是拼在一起就它认识我，我不认识它了。其实很简单，ajax就是使用了这几门技术组合成的一门新技术，它的功能就是在浏览器下，可以不通过刷新页面的形式，获取服务端的数据，例如：某度的搜索框，你输入了一个单词，搜索框会出现一个下拉框，显示相关的搜索词，这就是使用了ajax的地方（如下图），如果不适用ajax，你要实现此功能，估计要加一个按钮，上面写着相关搜索词，点击一下，刷新页面，才能显示出来。

使用ajax的好处已经看到了，第一，交互好，让用户少做点事，方便快捷，设计师也不用考虑多一个按钮放什么地方，苦了程序员而已；第二，减少网络的传输量，因为在某些情况下，你只需要页面部分数据更新，其它地方都不需要，但是如果不适用ajax就要传输整个页面，增加了页面的加载速度，而且在互联网初期，带宽是很低的，能节约一点是一点，况且这节约的是一大部分。

缺点是，在网络不好的情况下，ajax与服务器交互时间过长，而页面却没有任何反应，这用户体验对用户是致命的，因此，一般都要加上一个可视化组件，显示正在获取数据，而不是出现bug，页面挂掉的情况。

ajax内部结构

ajax说的这么神奇，它又是如何实现的呢？有几大关键点用于实现。

1. XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject），由微软提供的，通过封装XMLHttpRequest的操作得到ajax接口。ajax能局部刷新都是依靠此对象！w3c的例子：ajax例子

xmlhttp.open("GET","demo.cgi",true);        //通过使用Get方法调用url，局部刷新页面
xmlhttp.send(null);                         //发送真正请求，open只是准备，并没有真正发送

在IE不知道多少版本下- -||，浏览器是使用缓存数据，并不会请求服务器，因此需要在url后面添加一个随机参数，以确保每次都是请求服务器的数据。

xmlhttp.open("GET","demo.cgi?t=" + Math.random(),true);

另一方面，可以在url后添加随机参数也就是说可以在url后添加参数，以此传递。

xmlhttp.open("GET","demo.asp?user=admin&passwd=admin",true);

2. Get和Post，不只是ajax内是Get和Post，整个Web开发，传输数据都是使用Get和Post，在ajax内，使用Get和Post是有一点点的区别，Get的调用形式参考上面，而Post的调用形式则如下

xmlhttp.open("POST","demo.cgi",true);            //传递的方法不同，没什么好说的
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");   //Post是用于传递大量数据，使用在表单的提交，这就是与Get的不同，Get是以url参数的形式，则是text/html，而Post则以表单，而表单则是使用application/x-www-form-urlencoded的形式，因此ajax使用Post请求时，需要模拟表单提交的形式，添加请求头部Content-type。
xmlhttp.send("user=admin&passwd=admin");        //Get的是为null的，Send的参数是专门为post方法服务的。

3. readyState，存放XMLHttpRequest的状态，标识着一个ajax的请求从开始到结束，让开发者可以在不同状态变换时，可以做某些操作。

- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪

4. 同步与异步，这一关系可以简单的理解为单进程与多进程，ajax使用的最多的就是异步方式。

xmlhttp.open("GET","demo.cgi",true);  //第三个参数决定是同步(false)还是异步(true)

onreadystatechange，当readyState变换时，会触发此函数。ajax以异步(true)方式调用，必须实现此函数，否则请求无效。而同步(false)则不能实现此函数。

xmlhttp.onreadystatechange=function()            //选自http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

5. 回调函数（Call Back），将函数以参数的形式，传递给另一个函数，让其调用。例如，onreadystatechange调用时，需要返回服务器数据和自定义串组合，不能将onreadystatechange写死，这时将自定义函数传递给 onreadystatechange，让其调用组合。（好难说- -||）

function A(){
    functioin B(){
        return <p>test</p>;
    }
}

A();    //A得到的是空，因为B的返回数据不能返回到A的返回数据，这两者是不同的
//-----------------------------------------------------------------
function A(cb){
    functioin B(cb){
        return cb();
    }
}

A(function {
    return <p>test</p>;    //将函数以参数的形式传递，并运行。（好像问题还没解决。。）
});

运用

ajax的使用很简单，就是传递一个json对象，jQuery调用ajax如下，其他的js库也差不多，可以依此类推。

$.ajax({                                                    //一个Ajax过程 
    type: "post",                                           //以post方式与后台沟通 
    url : "./demo.cgi",                                     //与此请求页面沟通 
    dataType:'json',                                        //从返回的值以 JSON方式 解释 
    data: 'username='+username+'&password='+password,       //发给服务器的数据有两项，分别是上面传来的u和p 
    success: function(json){                                //如果调用成功 
        alert(json.username+'\n'+json.password);            //打印出来
    }
});

完整例子，一个自定义封装XMLHttpRequest对象的ajax接口。

转载于:https://my.oschina.net/CppMonkey/blog/279869