ajax

作者: 写java的逗比叫z1 | 来源:发表于2016-11-28 22:35 被阅读62次

1. 什么是Ajax?

asynchronized javascript and xml
ajax是一种用来改善用户体验的技术, 其实质是使用XMLHttpRequest对象异步的向服务器发送请求.

2.使用ajax技术的好处

  • 浏览器可以从服务器同时请求多项内容
  • 浏览器请求返回的速度会快很多
  • 只有页面中真正改变的部分得到更新
  • 会减少服务器的数据流量
  • 用户可以在页面更新的同时继续工作
  • 有些改变无需与服务器往返通信就可以处理
  • 只有页面中真正的改变的部分得到更新(这是第二次出现, 因为实在是太重要了)
  • 你的老板会更喜欢你

3. 什么是XMLHttpRequest?

XMLHttpRequest是大多数浏览器对请求对象的叫法, 可以把它发送到服务器并从服务器得到响应而无需加载整个页面.

4. 发送ajax请求的步骤?

  1. 获取ajax对象.
function createXMLHttpRequest() {
    try {
        xhr = new XMLHttpRequest();
    } catch (tryMS) {
      try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (otherMS) {
              try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (failed) {
                    return null;
              }
           }
        }
        return xhr;
}
  1. 打开与服务器的连接
xhr.open(method,url,true)

method: 请求方式(get/post)
url: 指定服务器资源
true: 请求是否为异步请求, true为异步

  1. 设置回调函数
  • 为onreadystatechange事件绑定函数
xhr.onreadystatechange = function(){
        if (xhr.readyState==4 && xhr.status == 200) {
            var data = xhr.responseText();
        }
}
  • 响应内容可以是字符串, 也可以是xml内容
  1. 发送请求
xhr.send(null)

参数: 请求体内容, get请求也必须给出null

  • 如果是post请求, 需要在参数中给出请求的参数

5. jQuery中使用ajax

  • jQuery.ajax()
    该方法是jQuery的底层实现
    参数:
    url: 发送请求的地址
    data: 发送到服务器的数据
    dataType: 服务器返回的数据类型
    可用值
  • xml: 返回xml文档
  • html: 返回html
  • script: 返回js代码
  • json: 返回json数据
  • jsonp: 返回jsonp格式
  • text: 返回字符串
$.ajax({
        url:'user/login.do',
        data:paramter,
        dataType:'json',
        type:'POST',
        success:callback
});
  • jQuery.get()用于发送get请求
    该函数是简写的ajax函数, 等价于
$.ajax({
    url: url,
    data: data;
    success: success;
    dataType: dataType;
})
  • jQuery.getJSON()发送get请求加载json数据
  • jQuery.post() 发送post请求

参考资料

  1. "Head First Ajax" Riordan著 中国电力出版社
  2. http://www.w3school.com.cn/

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

    本文标题:ajax

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