分针网—每日分享：JavaScript-Ajax

http://www.f-z.cn/id/220

一、服务器搭建(php+apache)

http://www.php100.com/html/plugin/ser/2013/0905/91.html

二、什么是Ajax(阿贾克斯)

Asynchronous JavaScript and XML(异步JavaScript和XML，即用JavaScript异步形式去操作xml)

- 节省用户操作时间，提高用户体验，减少数据请求;

- 传输获取数据;

- 无需用户刷新，动态请求网络数据;

三、Ajax作用

异步获取数据，即是数据交互(通过ajax获取某一文本文件的内容);

四、Ajax过程

【注: 如果直接以文件形式打开，是会出错的，所以一定要搭建服务器！！！】

创建对象XMLHttpRequest()

open()方法

send()

request.onreadystatechange = function(){}

  
  

   
   // 1、打开浏览器
  
  
  
  

   
   // 创建一个ajax对象 ( ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’) )
  
  
  
  

   
   var request 
   
   = 
   
   null
   
   ;
  
  
  
  

   
   if 
   
   (window
   
   .XMLHttpRequest
   
   ) 
   
   {
  
  
  
  

   
     request 
   
   = 
   
   new 
   
   XMLHttpRequest
   
   (
   
   )
   
   ;
  
  
  
  

   
   } 
   
   else 
   
   {
  
  
  
  

   
     request 
   
   = 
   
   new 
   
   ActiveXObject
   
   (
   
   'Microsoft.XMLHTTP'
   
   )
   
   ;
  
  
  
  

   
   }
  
  
  
  

  
  

   
   // 2、在地址栏输入地址
  
  
  
  

   
   /*open方法
  
  
  
  

   
      参数一: 打开方法  get/post
  
  
  
  

   
      参数二: 请求地址
  
  
  
  

   
      参数三: 是否异步 (true异步: 非阻塞 / false同步: 阻塞)
  
  
  
  

   
   */
  
  
  
  

   
   request
   
   .
   
   open
   
   (
   
   'get'
   
   , 
   
   '00-笔记.rtf'
   
   , 
   
   true
   
   )
   
   ;
  
  
  
  

  
  

   
   // 3、提交请求(回车)
  
  
  
  

   
   request
   
   .
   
   send
   
   (
   
   )
   
   ;
  
  
  
  

  
  

   
   // 4、等待服务器返回内容
  
  
  
  

   
   /**
  
  
  
  

   
   responseText: ajax请求返回的数据即存放在该属性下(都为字符串):
  
  
  
  

   
         readyState属性: 请求状态
  
  
  
  

   
         0: (初始化)还没有调用open()方法
  
  
  
  

   
         1: (载入)已调用send()方法，正在放请求
  
  
  
  

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

   
         3: (解析)正在解析响应
  
  
  
  

   
         4: (完成)响应内容解析完成，可以在客户端调用
  
  
  
  

  
  

   
         on readystate change: 当readyState改变的时触发
  
  
  
  

  
  

   
         status: 服务器状态，http状态码
  
  
  
  

   
          1字开头:  消息类
  
  
  
  

   
          2字开头: 成功类
  
  
  
  

   
          3字开头: 重定向类
  
  
  
  

   
          4字开头: 请求错误类
  
  
  
  

   
          5字开头: 服务器错误类
  
  
  
  

   
     */
  
  
  
  

   
   request
   
   .onreadystatechange 
   
   = 
   
   function
   
   (
   
   )
   
   {
  
  
  
  
      
   
   if
   
   (request
   
   .readyState 
   
   == 
   
   4
   
   )
   
   {
  
  
  
  
          
   
   if
   
   (request
   
   .status 
   
   == 
   
   200
   
   )
   
   {
  
  
  
  
              
   
   // 请求到数据，显示
  
  
  
  
              
   
   var oP 
   
   = document
   
   .
   
   createElement
   
   (
   
   'p'
   
   )
   
   ;
  
  
  
  

   
                 document
   
   .body
   
   .
   
   appendChild
   
   (oP
   
   )
   
   ;
  
  
  
  

   
                 oP
   
   .innerHTML 
   
   = request
   
   .responseText
   
   ;
  
  
  
  
           
   
   } 
   
   else 
   
   {
  
  
  
  
              
   
   alert
   
   (
   
   '错误了'
   
   )
   
   ;
  
  
  
  
           
   
   }
  
  
  
  
      
   
   }
  
  
  
  
  
   
   }
  
  

五、同步、异步

同步：小店吃饭，小店老板厨师都是一个人

程序中：如果程序在下载数据，UI界面就无法响应；

异步：饭堂吃饭，收银台，打饭的，厨师，各自互不影响

程序中：异步下载数据和UI界面两个线程；

六、JOSN数据解析

JSON.parse()将一个符合JSON语法的字符串解析成一个对应类型的值或对象

var dataSource = JSON.parse(request.responseText);

在线解析:

http://json.cn

http://tool.oschina.net/codeformat/json

七、get和post请求

在http协议中定义了8种http请求的方法(get/post/options/head/put/delete/trace/connect/patch)，但通常都是get和post，即常说的使用http的get或post请求。

get/post请求是跟服务器进行交互的；

参数：是传递给服务器的具体数据，例如登陆的账号密码；

get请求：在请求URL后面以 ? 的形式跟上发给服务器的参数，多个参数之间用&隔开，例如:http://10.0.8.8/sns/my/login.php?username=erfangdong&password=123456 【注：由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB】

  
  

   
   // get请求，参数直接拼接到url中
  
  
  
  

   
   request
   
   .
   
   open
   
   (
   
   'get'
   
   , 
   
   './07-data.php?user=123@qq.com&password=123321'
   
   , 
   
   true
   
   )
   
   ;
  
  
  
  

   
   request
   
   .
   
   send
   
   (
   
   )
   
   ;
  
  

post请求：发给服务器的参数全部放在请求体（URL中看不到）中【注：post传递的数据量没有显示，这具体还得看服务器的处理能力】

  
  

   
   // 请求头,传输的数据类型(post默认是没有设置的)
  
  
  
  

   
   request
   
   .
   
   setRequestHeader
   
   (
   
   'content-type'
   
   ,
   
   'application/x-www-form-urlencoded'
   
   )
   
   ;
  
  
  
  

   
   // 请求参数
  
  
  
  

   
   request
   
   .
   
   send
   
   (
   
   'userName=EndEvent&age=30'
   
   )
   
   ;
  
  

get和post区别

1、post请求 请求地址和参数分离，比get更加安全 get请求的参数 直接暴漏在外面 不安全(相对而言)

2、get请求只能获取服务器的数据(下载数据/提交参数) 不能上传文件，而post两者都可以

3、get请求在浏览器中字符串长度最大限制为1024,post没有限制

八、ajax的封装

  
  

   
   /*
  
  
  
  

   
    * metchod: 请求方式
  
  
  
  

   
    * url: 请求地址
  
  
  
  

   
    * data: 请求参数
  
  
  
  

   
    * successFn: 请求成功执行的函数
  
  
  
  

   
    */
  
  
  
  

   
   function 
   
   ajax
   
   (method
   
   , url
   
   , data
   
   , successFn
   
   )
   
   {
   
   }
  
  

九、相关问题

缓存问题

问题: 发送同样的请求，因为存在有缓存，即当服务器内容发生改变后，会导致获取不了最新的数据。

解决: 在url的后面再添加一个随机数/时间戳(其实就保证每次发起的请求是不一样的)，这即可保证每次获取的数据都是最新的，而不是缓存数据。

  
  

   
   // 添加一个时间戳
  
  
  
  

   
   ajax
   
   (
   
   'get'
   
   ,
   
   '05-getData.php'
   
   ,
   
   'userName=EndEvent&age=18&'
   
   +
   
   new 
   
   Date
   
   (
   
   )
   
   .
   
   getTime
   
   (
   
   )
   
   , 
   
   function
   
   (response
   
   )
   
   {
  
  
  
  
  
   
   alert
   
   (response
   
   )
   
   ;
  
  
  
  

   
   }
   
   )
   
   ;
  
  

注: get有缓存问题，而post是没有缓存问题的；

中文乱码问题

问题: 如果参数中有中文，即会出现乱码问题。

解决: 将中文进行编码处理encodeURI。

  
  

   
   ajax
   
   (
   
   'get'
   
   ,
   
   '05-getData.php'
   
   ,
   
   'userName=' 
   
   + 
   
   encodeURI
   
   (
   
   '啦啦'
   
   ) 
   
   + 
   
   '&age=18&'
   
   +
   
   new 
   
   Date
   
   (
   
   )
   
   .
   
   getTime
   
   (
   
   )
   
   ,
   
   function
   
   (response
   
   )
   
   {
  
  
  
  
   
   
   alert
   
   (response
   
   )
   
   ;
  
  
  
  

   
   }
   
   )
   
   ;
  
  

十、跨域访问问题(浏览器安全限制所导致)

源文件与访问文件，不是在同一个目录下的，或者访问其他服务器的内容，这即是跨域访问，但是对于ajax是不支持跨域访问的。

解决跨域访问方法:

1、通过代理(即类似前面中的，获取JSON数据，那么就需要在后台服务器的php这个代理，来实现跨域访问)

操作: 每需要获取数据，都要后台服务器添加对应的操作，实用性不高；

2、XHR2(XMLHttpRequest level2是HTML5提供的方法)

问题: IE10以下都不支持；

3、flash

操作: 在服务器端需要一个crossdomain.xml跨域文件，这里有对应的白名单；

4、JSONP(JSON with Padding)

操作: 因为script标签是没有跨域问题的，是可以获取到数据的(例如网络获取jquery.js)

十一、JSONP(JSON with Padding)

通过script标签获取到对应的数据(即是包含在html文件中了)

问题: 请求回来的数据没有变量，使用不了

解决:

方式一: 可以给整体数据添加一个变量名(但这会有整体设计问题)

方式二: 通过函数调用，给函数传递参数的方式将整体数据传递过去

a、在资源加载之前定义一个函数，在函数中接收一个参数，在函数中即是获取数据后的操作；

b、需要时，通过script标签加载对应的远程文件数据，当数据加载进来的后，就会调用前面定义好的函数，并且将数据当做上函数的参数传入；

学习更多IT知识 加群：272292492