关于Ajax 指的是异步 (Asynchronous JavaScript and XML) <异步的javascript和XML>

1、 Ajax并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术

2、 Ajax并不是最新的编程语言，而是一种使用现有标准的新方法  它用于创建更好更快以及交互性更强的 Web 应用程序的技术。

3、 Ajax是能在不重新加载整个页面<无需刷新！>的情况下,能与服务器交换数据并更新网页内部分内容.

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术.简而言

之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户(不必造成重新加载页面便与WEB服务器

交换数据 可以让网页从后台服务器请求少量的信息而不是加载整个页面)使得因特网的应用程序更加小,速度更快,更加友好 ，同时需

要 注意 的是Ajax是被所有主流浏览器支持的，而且Ajax程序独立于浏览器和平台。

Ajax  的异步(无阻断 )和同步(阻断  一步一步进行 上一步没有完成 下一步就不继续)

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。

Ajax适合使用的应用场合有

*使用Ajax进行数据验证(用户登录名和密码是否正确和唯一性)

优点:不像传统的验证数据需要填写完数据后向后台服务器提交表单数据,进入到服务器端进行验证,整个过程时间长且对后台服务器

造成不必要的负担         当使用了Ajax技术是直接由XMLHttpRequest对象发出验证请求，根据返回的HTTP   响应判断验证的数据是

否符合，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，非常的快速且不增加服务器的负担。

*使用Ajax更新页面的部分内容 在无需刷新的情况下 , 可更新多条甚至是版块的内容 ，如股票的更新  如百度搜索 无需确定 只需要

在搜索框写入搜索的内容 下方变自动更新内容 <减少向服务器的请求>

*网页小游戏(联网的)、新浪微博 、Google 地图、开心网.

服务器：能提供一定服务的特殊电脑.ftp、svn、web

网页浏览过程分析：请求 到服务器读取 返回数据 下载到本地浏览器看到
如何配置自己的服务器程序（wamp）
安装一个wamp集成环境，因为Ajax是读取服务器上面的信息的，所以我们接下来的页面需要保存到www目录下：比如我创建一个文件aa.html放到该目录下。我可以通过浏览器输入下面的信息找到这个文件:

loclhost/aa.html

127.0.0.1/aa.html

使用Ajax

基础：请求并显示静态TXT文件

字符集编码

缓存、阻止缓存

动态数据：请求JS（或json）文件

eval的使用

DOM创建元素

局部刷新：请求并显示部分网页文件

HTTP请求方法
GET——用于获取数据（如：浏览帖子）：不安全，放到url里面传递信息，通过网址传递.容易出错.因为有大小限制：4-10k,有缓存 只能传输字符串

POST——用于上传数据（如：用户注册）：稍微安全一些，不通过网址url，可以传大文件，2G，没有缓存

GET、POST的区别

get是在url里传数据：安全性没有post好、容量限制 、并且浏览器本地有缓存

编写Ajax函数的步骤:

1、创建Ajax对象

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()

2、连接服务器（打开和服务器的连接）open('方法','url',异步处理)

open(方法, 文件名, 异步传输)

同步和异步

3、发出请求

send()

4、接收返回

请求状态监控

onreadystatechange事件 ：当状态码改变时触发  :on readystate change

readyState属性：请求状态

0 （未初始化）还没有调用open()方法

1 （载入）已调用send()方法，正在发送请求

2 （载入完成）send()方法完成，已收到全部响应内容

3 （解析）正在解析响应内容

4 （完成）响应内容解析完成，可以在客户端调用了

status属性：HTTP状态码   请求结果     服务器端的状态   找到成功返回>200      未找到错误 返回:>404

lresponseText  ：请求到的文本,字符串

封装的js代码如下:

  1. // 封装ajax()方法
  2. function ajax(url,fnSucc,fnFaild){
  3. //1、创建Ajax 对象
  4. if(window.XMLHttpRequest)
  5. {
  6. var oAjax=new XMLHttpRequest();                     //声明 兼容除IE6外  所有主流浏览器
  7. }
  8. else
  9. {
  10. var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //声明 兼容IE6   内置的 微软的 插件
  11. }
  12. //2、连接服务器(打开连接服务器)
  13. //  open(method,url,async)
  14. //  method ：请求的类型；GET 或 POST
  15. //  url ：文件在服务器上的位置
  16. //  async ：true（异步）或 false（同步）
  17. oAjax.open('GET',url,true);
  18. //3、发送请求
  19. oAjax.send();
  20. //4、接受请求
  21. oAjax.onreadystatechange=function (){          //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  22. /** readyState状态含义
  23. *  0: 请求未初始化
  24. 1: 服务器连接已建立
  25. 2: 请求已接收
  26. 3: 请求处理中
  27. 4: 请求已完成，且响应已就绪
  28. */
  29. if(oAjax.readyState==4){
  30. /** status  状态含义
  31. 200: "OK"    成功
  32. 404: 未找到页面  出错
  33. */
  34. if (oAjax.status==200) {
  35. //alert('成功了！'+Ajax.readyState);   //responseXML  获得 XML 形式的响应数据。
  36. fnSucc(oAjax.responseText);          //responseText 获得字符串形式的响应数据。
  37. }
  38. else{
  39. //alert('失败了');
  40. if(fnFaild){
  41. fnFaild
  42. }
  43. }
  44. }
  45. };
  46. }

ajax(url,fnSucc,fnFaild)函数参数介绍：
url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild:失败返回信息

HTML页面使用方法 代码如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script src="ajax.js"></script>
  7. <script>
  8. window.onload=function ()
  9. {
  10. var oBtn=document.getElementById('btn1');
  11. oBtn.onclick=function ()
  12. {  //阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数
  13. //第二种阻止缓存方法: 声明全部变量num = 0; 在路径后面加'aaa.txt?='+(num++) 递归
  14. ajax('aaa.txt?t='+new Date().getTime(), function (str){
  15. alert(str);
  16. }, function (){
  17. alert('失败');
  18. });
  19. };
  20. };
  21. </script>
  22. </head>
  23. <body>
  24. <input id="btn1" type="button" value="读取" />
  25. </body>
  26. </html>

上面是获取txt里面内容的，如果想获取数组和json的内容。方法如下：ajax读取的到的都是字符串，要用函数eval()函数
读取数组：

  1. [1,2,3,4,5,6,7]
  1. <script src="ajax.js"></script>
  2. <script>
  3. window.onload=function ()
  4. {
  5. var oBtn=document.getElementById('btn1');
  6. oBtn.onclick=function ()
  7. {
  8. ajax('arr.txt?t='+new Date().getTime(), function (str){
  9. var arr=eval(str); //eval  eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
  10. alert(arr[3]);     //数组加下标
  11. }, function (){
  12. alert('失败');
  13. });
  14. };
  15. };
  16. </script>

读取json：

  1. [{a: 5, b: 7}, {a: 8, b: 12}]
  1. <script src="ajax.js"></script>
  2. <script>
  3. window.onload=function ()
  4. {
  5. var oBtn=document.getElementById('btn1');
  6. oBtn.onclick=function ()
  7. {
  8. ajax('arr2.txt?t='+new Date().getTime(), function (str){
  9. var arr=eval(str);
  10. alert(arr[0].a); //数组的下标  点a是代表下标里面的变量名  那个变量的值
  11. }, function (){
  12. alert('失败');
  13. });
  14. };
  15. };
  16. </script>

<案例>读取的json放大ul里面：

  1. [{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script src="ajax.js"></script>
  7. <script>
  8. window.onload=function ()
  9. {
  10. var oBtn=document.getElementById('btn1');
  11. var oUl=document.getElementById('ul1');
  12. oBtn.onclick=function ()
  13. {
  14. ajax('data.txt?t='+new Date().getTime(), function (str){
  15. var arr=eval(str);
  16. for(var i=0;i<arr.length;i++)
  17. {
  18. var oLi=document.createElement('li');
  19. oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
  20. oUl.appendChild(oLi);
  21. }
  22. }, function (){
  23. alert('失败');
  24. });
  25. };
  26. };
  27. </script>
  28. </head>
  29. <body>
  30. <input id="btn1" type="button" value="读取" />
  31. <ul id="ul1">
  32. </ul>
  33. </body>
  34. </html>

传统开发模式: (不使用 Ajax) 如果需要更新内容，会触发一次返回服务器HTTP的请求  必需重载整个网页面 服务器做出处理后，返回一个html页面给用户

Ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。

如下是对比图:

Ajax作用、及Ajax函数的编写的更多相关文章

  1. Ajax不执行回调函数的原因（转）

    今天用ajax的post请求后台,但是始终不执行回调函数,经查得知,ajax不执行回调函数的原因如下: jquery中规定返回的JSON字符串的KEY要用引号括起来,如{“result”: 1}这样才 ...

  2. 第110天：Ajax原生js封装函数

    一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...

  3. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  4. thinkphp5如何使用ajax（变化的核心，也就是ajax作用的核心是什么）

    thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么) 一.总结 一句话总结:ajax的核心在于页面的不刷新而获取后台数据,所以后台的操作还是一样(获取参数,返回数据),只是 ...

  5. jquery Ajax 不执行回调函数success的原因

    jquery Ajax 不执行回调函数success的原因: $.ajax({ type: "post", contentType: "application/json& ...

  6. aJax学习之Ajax工作原理

    转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...

  7. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

    1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...

  8. Ajax引擎：ajax请求步骤详细代码

    说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...

  9. ajax和原生ajax、文件的上传

    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...

随机推荐

  1. Bootstrap<基础四> 代码

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  2. Maven搭建SSH环境

    一.新建maven项目 选中maven-aechetype-webapp group Id一般为公司域 :Artifact Id相当于项目名称 :version不需要更改:Package不使用默认,手 ...

  3. php 循环删除目录中的过期文件

            $savepath1 = 'Public/biaoqian/upload';         $path1 = dir($savepath1);           while (($ ...

  4. DataTable 删除列 调整列顺序 修改列标题名称

    DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...

  5. Microsoft .NET Framework 4.6.1

    适用于操作系统平台:Windows 7 SP1.Windows 8.Windows 8.1.Windows 10.Windows Server 2008 R2 SP1.Windows Server 2 ...

  6. php 文件操作

    $fn="e:\debug.txt"; if(is_writable($fn)==false){ die("不能写入"); } file_put_content ...

  7. C# 判断文件有没占用

    C# 判断文件有没占用 using System; using System.Collections.Generic; using System.Text; using System.Runtime. ...

  8. 深入理解unslider.js源码

    最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...

  9. 初探NIOS II之hello_world

    平台背景: 操作系统:win7  64bit 开发板:DE2-115 Quartus ii:15.0及配套的NIOS ii开发平台 一.硬件系统的建立 1.在Quartus里新建工程,这是很基本的就不 ...

  10. SAP IDOC开发(转)

    创建IDOC:   第一步:WE31 创建IDOC所包含的字段.   第二步:WE30 创建IDOC 把Segment分配给IDOC第三步:WE81 创建信息类型第四步:WE82 把IDOC类型与信息 ...