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. js cookie 操作 封装

    pCookie.js (function(){ var PotatogCookie = {}; //设置cookie PotatogCookie.set = function(key, value, ...

  2. for循环的运算 改变循环的控制流 死循环 遍历数组 定义方法 有名函数匿名函数 定义函数的方法取值 与 自己创建函数取值 局部与全局变量 次幂/随机数/取绝对值/向上取整/平方根

    今天学习的是for循环,对for循环的运算有了理解. document.write(" ")里的内容在网页上展示出来 有名函数非常重要!!!!!!!!!!!!!!!!!!!!!并且 ...

  3. 如何打开kernel最开始的打印

    1.Kernel hacking  ---> Kernel low-level debugging functions -->   Early printk 2.boot option中你 ...

  4. Python Faker的使用(1):基础使用方法与函数速查,生成随机数据

    在软件需求.开发.测试过程中,有时候需要使用一些测试数据,针对这种情况,我们一般要么使用已有的系统数据,要么需要手动制造一些数据. 在手动制造数据的过程中,可能需要花费大量精力和工作量,现在好了,有一 ...

  5. cpt212b--- 触摸芯片配置

    软件的应用: 1.可以依照你所需要的芯片类型建立适当的工程,下面是在没有j-link的情况时的一种操作方式 建立完工程后,cpt212b的配置参数页面如上,更改参数点击Save 按钮,软件自动生成 . ...

  6. C#中使用EntityFramework(EF)生成实体进行存储过程的调用

    在EF中使用定义对象模型的方式调用一个存储过程,这个存储过程返回的是一组包含两列的值.(ProjectName,Count) 下面是存储过程: CREATE procedure [dbo].[Pro_ ...

  7. Handlebars.js registerHelper

    Handlebars.registerHelper('link', function (text, url) { text = Handlebars.Utils.escapeExpression(te ...

  8. Django-Form组件之字段

    Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1.Django内置字段如下: 1 2 3 4 5 6 7 8 9 10 1 ...

  9. html5课件外包-----swf/AS2/AS3/fla/ppt课件如何转换为html5交互课件/动画

    随着Adobe公司公布2020年将不再更新和维护flash,flash逐渐被html5取代,很多教育机构都在面临着如何将自己的flash交互课件产品转换到html5版本的问题,最近遇到非常多的客户一上 ...

  10. linux如何查看某个端口接收到的数据

    lsof -i:11883  可以获得 端口的连接信息 用这个可以按照端口查看详细的收发数据 sudo tcpdump -A -s 0 'tcp port 11883 and (((ip[2:2] - ...