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. 关于CGI、FastCGI和PHP-FPM的关系

    1.CGI是干嘛的? CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...

  2. 按键精灵http.定义getWeb

    Function 取网页源码(URL) Set objXML=CreateObject("Microsoft.XMLHTTP") objXML.Open "Get&quo ...

  3. 关于MPMoviePlayerController类播放视频时,外放没有声音的问题(ios)

    一.导入音频资源类 #import "AVFoundation/AVAudioSession.h" 二.在播放视频的方法中加一句支持外放的代码 [[AVAudioSession s ...

  4. 干货篇:揭开CSS盒模型神秘的面纱

    写博客可以对学习内容进行总结.分享和交流(面对面的技术分享会也不错)... 如果是单纯的记录,印象笔记完全够了. 步入正题,盒模型是web布局核心,掌握基础知识,以后实战中会如鱼得水~ 概念与历史 C ...

  5. 【Python之路】第六篇--Python基础之模块

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  6. aop代理方式引起的spring注入bean(实现类)与获取bean(实现类)出错

    描述: 现象一 :A 为 接口,AImpl 为 A 的实现类,且 AImpl 受 aop 扫描,且 aop 无特殊配置   此时若:Spring 中 注入 AImpl 类型的bean,获取一样     ...

  7. Webstrom 连接svn报错怎么解决

    Subversion: (Accessing URL:  https://192.168.1.249:8443/svn/H5/seif ) Received fatal alert: handshak ...

  8. android studio genymotion插件

    下载andriod studio 2.2 正式版,我的版本带SDK,一直安装, 1.在设置SDK的位置. 2.安装好后在安装虚拟机插件,genymotion去官网下载不带虚拟机的. 下载地址https ...

  9. linux远程登录ssh免密码

    原文链接,感谢原作者. (一)问题: 假如我们现在有两台机器:ServerA和ServerB,现在想要让ServerA不用输入密码就能够进行访问. (二)方法和原理: 我们使用ssh-keygen在S ...

  10. Facebook 添加点赞按钮

    本来以为facebook文档里面会有那么一个简单的API,请求之后就可以对指定的页面点赞.但可能是出于防作弊方面的考虑,facebook只提供了自己官方的按钮 https://developers.f ...