Web前端之路让前端飞JavaScript

15、JavaScript-Ajax

2017-05-16  本文已影响239人  EndEvent

每天一句：因为有了因为，所以有了所以。既然已成既然，何必再说何必。

一、服务器搭建(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过程

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

// 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数据解析

  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请求，参数直接拼接到url中
  request.open('get', './07-data.php?user=123@qq.com&password=123321', true);
  request.send();

  // 请求头,传输的数据类型(post默认是没有设置的)
  request.setRequestHeader('content-type','application/x-www-form-urlencoded');
  // 请求参数
  request.send('userName=EndEvent&age=30');

1、post请求 请求地址和参数分离，比get更加安全   get请求的参数 直接暴漏在外面 不安全(相对而言)
2、get请求只能获取服务器的数据(下载数据/提交参数) 不能上传文件，而post两者都可以
3、get请求在浏览器中字符串长度最大限制为1024,post没有限制

八、ajax的封装

/*
 * metchod: 请求方式
 * url: 请求地址
 * data: 请求参数
 * successFn: 请求成功执行的函数
 */
function ajax(method, url, data, successFn){}

九、相关问题

// 添加一个时间戳
ajax('get','05-getData.php','userName=EndEvent&age=18&'+new Date().getTime(), function(response){
    alert(response);
});

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

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)

上一篇下一篇

猜你喜欢

热点阅读