ajax的理解和运用
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的理解和运用的更多相关文章
- Ajax初步理解
最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...
- Ajax的理解
初学JS,一直认为Ajax是个很高级的.不可亵玩的东西.这两天怀着忐忑的心情接触了一下它, 感觉它并没有想象中的那么难理解. 其实,Ajax就是浏览器端向服务器请求资源的一个对象(方法). 就跟打电话 ...
- 面试时怎样回答：你对原生ajax的理解
很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些 ...
- 有关ajax的理解；
jQuery是JavaScript封装的一个库,里面封装了一些便于我们使用的方法,同时还有$.ajax()的一些理解需要我们更加深入了解 ajax简介: 实现后台与前台交互的功能或方法就叫做ajax: ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- ajax的理解与工作流程
一.什么是ajax ajax是一种异步通信技术.在ajax出现之前,客户端与服务端之间直接通信.引入ajax之后,客户端与服务端加了一个第三者--ajax.有了ajax之后,通过在后台与服务器进行少量 ...
- $Ajax简单理解
关于web开发的可能我们不能或缺的利器就是$Ajax,我们这里就不具体的将里面的原理(如果大家有时间的话可以好好的看看javascript里面的权威指南)里面讲的比较详细了 这里就在不说了.今天我们就 ...
- 对Ajax的理解
一.Ajax的工作原理: 1. Ajax的机制是:完成异步请求,实现页面的局部刷新. 2. 发送异步请求:通过xmlhttprequest方法. 3. 浏览器向服务器发送异步请求: 服务器接收处理请求 ...
- 系统前端基本文件+ajax部分理解
静态页面: 一.static: css dist fonts images js model 二.templates: html ajax搜索操作: <html> <head> ...
随机推荐
- es6语法
let定义变量,特性: 1,不允许重复定义 2,不存在预解析 3,变量存在于会块级作用域 即{}内部 const : 定义常量,常量的值不能修改,若常量是对象 对象下的属性可修改. 解构赋值语法: 数 ...
- S.O.L.I.D五大原则之单一职责SRP
转自 : 汤姆大叔的blog Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是: The Single Responsibility Principle(单 ...
- Winform 无边框窗口移动自定义边框粗细颜色
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- push类型消息中间件-消息服务端(三)
1.连接管理 网络架构原来是使用是自己开发的网络框架Gecko,Gecko默认为每个网络连接分配64KB的内存,支持1000个网络连接,就需要大概64MB的内存.后来采用Netty重构了网络服务层. ...
- android 5.0 -- Ripple 效果
Ripple 水波纹效果,也就是涟漪效果. 波纹效果有两种: 1,波纹有边界:波纹涟漪效果只是显示在控件内部 android:background="?android:attr/select ...
- Javaweb 第7天 Servlet课程
Servlet课程 三日大纲 ● 网络概念,专业术语 ● Tomcat使用,发布网站,使用Myeclispe发布网站(搭建环境) ● 编写Servlet,Servlet生命周期 ● 用户注册,显示所有 ...
- PHP全角半角转换函数
之前试过网上找的通过ASCII之类的字符替换,发现很多莫名其妙的问题.最后还是换成下面的字符替换方式了,把目前能找到的所有全角都列出来了一个个替换吧 /** * 全角字符转换为半角 * * @para ...
- 计算机网络课程优秀备考PPT之第五章网络层（五）
为了记录自己从2016.9~2017.1的<计算机网络>助教生涯,也为了及时梳理和整写笔记! 前期博客是, 计算机网络课程优秀备考PPT之第一章概述(一) 计算机网络课程优秀备考PPT之第 ...
- jQuery slideDown()--向下滑动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...