AJAX ： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

譬如微博刷新，百度输入框输入关键字后出现的推荐字。

下面列举一段代码来加深理解。

<html>

<head>

<script type="text/javascript">

var xmlhttp;

function loadXMLDoc(url,cfunc){

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

　　xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject){// code for IE6, IE5

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

}

if (xmlhttp!=null){

　　xmlhttp.onreadystatechange=cfunc;

　　xmlhttp.open("GET",url,true);

　　xmlhttp.send();

}

else{

　　alert("Your browser does not support XMLHTTP.");

}

function myFunction(){

　　loadXMLDoc("http://www.w3school.com.cn/ajax/demo_get2.asp?fname=Gu&lname=Xiao",function(){

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

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

    　　}

  　　});

}

</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>

</html>

XMLHttpRequest 对象的常用方法和属性：

open(method,url,async)方法：规定请求的类型、URL 以及是否异步处理请求。

send(string)方法：将请求发送到服务器。其中，string：仅用于 POST 请求。

responseText属性：获得字符串形式的响应数据。

responseXML属性：获得 XML 形式的响应数据，需解析。

onreadystatechange属性：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState属性：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

status属性：若返回200: "OK"，若返回404: 未找到页面。

其中open函数里第一个参数一般选get，如果第三个参数选false同步的话，不需要onreadystatechange属性， 把代码放到 send() 语句后面即可，如下

xmlhttp.open("GET","test1.txt",false);

xmlhttp.send();

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

get：不安全 速度快 一般内容不大于2KB

post：安全 速度慢 一般内容大小没有限制　　

ajax的理解和运用的更多相关文章

  1. Ajax初步理解

    最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...

  2. Ajax的理解

    初学JS,一直认为Ajax是个很高级的.不可亵玩的东西.这两天怀着忐忑的心情接触了一下它, 感觉它并没有想象中的那么难理解. 其实,Ajax就是浏览器端向服务器请求资源的一个对象(方法). 就跟打电话 ...

  3. 面试时怎样回答：你对原生ajax的理解

    很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些 ...

  4. 有关ajax的理解；

    jQuery是JavaScript封装的一个库,里面封装了一些便于我们使用的方法,同时还有$.ajax()的一些理解需要我们更加深入了解 ajax简介: 实现后台与前台交互的功能或方法就叫做ajax: ...

  5. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  6. ajax的理解与工作流程

    一.什么是ajax ajax是一种异步通信技术.在ajax出现之前,客户端与服务端之间直接通信.引入ajax之后,客户端与服务端加了一个第三者--ajax.有了ajax之后,通过在后台与服务器进行少量 ...

  7. $Ajax简单理解

    关于web开发的可能我们不能或缺的利器就是$Ajax,我们这里就不具体的将里面的原理(如果大家有时间的话可以好好的看看javascript里面的权威指南)里面讲的比较详细了 这里就在不说了.今天我们就 ...

  8. 对Ajax的理解

    一.Ajax的工作原理: 1. Ajax的机制是:完成异步请求,实现页面的局部刷新. 2. 发送异步请求:通过xmlhttprequest方法. 3. 浏览器向服务器发送异步请求: 服务器接收处理请求 ...

  9. 系统前端基本文件+ajax部分理解

    静态页面: 一.static: css dist fonts images js model 二.templates: html ajax搜索操作: <html> <head> ...

随机推荐

  1. Python学习笔记——基础篇【第七周】———类的静态方法 类方法及属性

    新式类和经典类的区别 python2.7 新式类——广度优先 经典类——深度优先 python3.0 新式类——广度优先 经典类——广度优先 广度优先才是正常的思维,所以python 3.0中已经修复 ...

  2. [Q]注册申请码获取工具问题

    问题一: 异常信息: 有关调用实时(JIT)调试而不是此对话框的详细信息, 请参见此消息的结尾. ************** 异常文本 ************** System.Reflectio ...

  3. linux kernel module

    #include <linux/init.h>#include <linux/module.h>#include <linux/kernel.h> static i ...

  4. 动态多条件查询分页以及排序(一)--MVC与Entity Framework版url分页版

    一.前言 多条件查询分页以及排序  每个系统里都会有这个的代码 做好这块 可以大大提高开发效率  所以博主分享下自己的6个版本的 多条件查询分页以及排序 二.目前状况 不论是ado.net 还是EF ...

  5. BFS - leetcode [宽度优先遍历]

    127. Word Ladder int size = q.size(); for(int k = 0; k < size; k++){//for 次数 找到一个erase一个 q里面加入的是所 ...

  6. Oracle新实例创建

    http://blog.itpub.net/29519108/viewspace-1443918/ 刚开始创建时,千万别点容器数据库,不然后面新建用户时,用户名前得加C##. 常用命令: sqlplu ...

  7. JDOM与DOM主要有两方面不同

    我这丝毫没有吐槽的意思哟,只是想说作为一个合格的程序员大家最起码需要做到思维严谨这点,在有能力的情况下对用户体验能提点建议最好.自己写的代码一定要经过严格测试再交付,不要指望测试人员帮你测试再去修改, ...

  8. C#模板打印excel

    using Microsoft.Office.Interop.Excel; //引用   public void PrintPriviewExcelFile(string filePath) {    ...

  9. LeetCode #3. Longest Substring Without Repeating Characters C#

    Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...

  10. scala集合和高级函数操作

    scala常用函数操作 reduceLeft   是将集合的元素从左向右进行所需要的相应操作,图以减法为例展示,表达的算法是 : 1-2-3-4-5 例: (1 to 5).reduceLeft(_ ...