美文网首页
Ajax (Asynchronous JavaScript An

Ajax (Asynchronous JavaScript An

作者: getElementsByMK | 来源:发表于2017-06-03 19:29 被阅读0次

ajax是什么?如何使用ajax?

1. AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

2. ajax不是新的编程语言,而是一种使用现有标准的新方法。

3. ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。

ajax的优点:

1、最大的一点是页面无刷新,用户的体验非常好。
  2、使用异步方式与服务器通信,具有更加迅速的响应能力。。
  3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
  并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
  4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
  5、ajax可使因特网应用程序更小、更快,更友好。

ajax的缺点:

1、ajax不支持浏览器back按钮。
  2、安全问题 AJAX暴露了与服务器交互的细节。
  3、对搜索引擎的支持比较弱。
  4、破坏了程序的异常机制。
  5、不容易调试。

  ajax: function (option) {
    //1.创建异步对象
    var xhr = new XMLHttpRequest();

    // url 可能需要拼接
    if (option.type == 'get') {
      option.url += '?';
      option.url += option.data;
      // 如果 这里 使用了 data 那么 send 这个方法中 null
      option.data = null;
    }
    //2.设置属性(请求头,请求行)
    xhr.open(option.type, option.url);

    // 设置 请求头
    if (option.type == 'post') {
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    }
    //4.注册状态改变事件
    xhr.onreadystatechange = function () {
      //5.判断状态&请求是否成功并使用数据
      if (xhr.readyState == 4 && xhr.status == 200) {
        // xhr 异步对象中 有一个 方法
        // 获取响应报文的 响应头中的 某些信息 这里我们获取了 content-type的值
        // 从而 获取 到底是 json 还是 xml 返回不同的数据 给用户
        var value = xhr.getResponseHeader('Content-Type');
        // 如果有 xml
        if (value.indexOf('xml') != -1) {
          // 如果有xml 就返回xml
          option.success(xhr.responseXML);
        } else if (value.indexOf('json') != -1) {
          // 如果是json数字据 那么 帮忙 把转换的操作也做了
          option.success(JSON.parse(xhr.responseText));
        } else {
          option.success(xhr.responseText);
        }
      }
    }
    //3.发送请求 请求主体
    // 数据 放在 这里 发送
    xhr.send(option.data);
  }
}

ajax的get方式和post方式有什么区别

最简单的区别:
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
3.get请求需注意缓存问题,post请求不需担心这个问题
Get方式:
用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),
也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。
另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。
因此,在某些情况下,get方法会带来严重的安全性问题。
Post方式:
当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,
使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

相关文章

网友评论

      本文标题:Ajax (Asynchronous JavaScript An

      本文链接:https://www.haomeiwen.com/subject/xvaqfxtx.html