Ajax（Asynchronous JavaScript + XML）不是语音，不是框架，也不能算是一种技术，而是一种模式。通过这种模式实现不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
 
Ajax的核心是XMLHttpRequest。XMLHttpRequest是浏览器内置对象，用于在不更新网页的情况下和服务器通信，获取数据。
 
以下是来自菜鸟教程的示例：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

    var xmlhttp;

    if (window.XMLHttpRequest)

    {

        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

        xmlhttp=new XMLHttpRequest();

    }

    else

    {

        // IE6, IE5 浏览器执行代码

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function()

    {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

    xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>
XMLHttpRequest.readyState属性存储请求的4个状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
readyState变化时，会触发XMLHttpRequest.onreadystatechange事件。在该事件中处理服务器返回的数据并更新网页。
 
XMLHttpRequest.open(method,url,async)方法的三个参数分别表示：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
通常async传true。如果传false，就没有必要定义onreadystatechange事件，因为程序会在send()处阻塞，可以直接在send()返回后处理response。
 
XMLHttpRequest有两个属性用来获取服务器的响应：
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
 
本文主要是了解下Ajax的基本原理，暂不涉及其他高级用法。
 

Ajax学习笔记——基本原理的更多相关文章

  1. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  2. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  3. 基于PHP的AJAX学习笔记（教程）

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  4. ajax学习笔记1

    ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据 ...

  5. AJAX学习笔记

    AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...

  6. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  7. Ajax学习笔记2之使用Ajax和XML

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...

  8. Ajax学习笔记1之第一个Ajax应用程序

    代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...

  9. Ajax学习笔记(二)

    二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...

随机推荐

  1. [C]排序并插入

    /* 编写程序,在主函数中定义一个有10个元素的整型一维数组,用户输入9个数据,调用函数,对数组元素进行从小到大排序后,在函数中输入一个数,插入到数组中正确的位置,并输出. */ #include&l ...

  2. 使用python读取MS-SQL数据库

    使用python读取MS-SQL中的数据,这里使用到模板pymssql. 因为不是python自带的模板,所以首先需要使用pip安装,对应命令:pip install pymssql 建立main.p ...

  3. What You Can Learn from Actifio Logs

    The Actifio services generate many logs, some of which are useful for troubleshooting. This section ...

  4. vue中父组件给子组件额外添加参数

    1 子组件: this.$emit('callbackone',item.parentId) 2 父组件: @callbackone="callbackone($event,index)&q ...

  5. Mvc Session 设置以后再构造函数中取值时为null问题

    在登录界面写了一个session在 别的页面的构造函数中获取始终未null  后来改成 System.Web.HttpContext.Current.Session["User"] ...

  6. Django学习笔记之URL与视图cookie和session

    cookie和session cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了 ...

  7. [踩坑系列]URLEncode 中对 空格的编码有 “+”和“%20”两种

    URL中的空格有时候被编码成%20,有时候被编码成加号+,曾经迷糊过一段时间,后来查了下资料才搞明白. 一个URL的基本组成部分包括协议(scheme),域名,端口号,路径和查询字符串(路径参数和锚点 ...

  8. ActiveMQ (一) 简介

    1.ActiveMQ简介 先分析这么一个场景:当我们在网站上购物时,必须经过,下订单.发票创建.付款处理.订单履行.航运等.但是,当用户下单后,立即跳转到“感谢那您的订单” 页面.不仅如此,若果没有延 ...

  9. Oauth2手册 第一章

    来源:https://github.com/jeansfish/RFC6749.zh-cn/blob/master/SUMMARY.md 1. 简介在传统的客户端-服务器身份验证模式中,客户端请求服务 ...

  10. HLS自习（1）

    HLS自习(1) 处理器的处理方式: