Ajax的理解
初学JS，一直认为Ajax是个很高级的、不可亵玩的东西。这两天怀着忐忑的心情接触了一下它，
感觉它并没有想象中的那么难理解。
其实，Ajax就是浏览器端向服务器请求资源的一个对象（方法）。
就跟打电话的过程差不多。
先以打电话为例，我们分为四个步骤：
1.手机
2.拨号
3.说话
4.对方回话
那么在Ajax中也是这四步：
1.创建对象（XMLHttpRequest）
2.连接服务器（open(方法, 文件名, 异步传输)）
3.发送请求 （send()）
4.接收请求并响应
废话不多说，先上封装好的一个Ajax（命名为Ajax.js）
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
//IE6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true); //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange=function ()
{
//oAjax.readyState //浏览器和服务器，进行到哪一步了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert('失败:'+oAjax.status);
}
}
};
}
然后我们在html里面直接用它就可以了
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="Ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
ajax('a.txt', function (str){
alert(str);
});
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="读取" />
</body>
</html>
注：
在计算机上装一个服务器
http://wamp-server-wamp5.cn.uptodown.com/
将文件放在www文件夹下
访问：locahost/文件名
就可以了。
Ajax的理解的更多相关文章
- Ajax初步理解
最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...
- ajax的理解和运用
AJAX : Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). 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> ...
随机推荐
- tomcat 详解五 tomcat页面设置访问权限
转自:http://blog.knowsky.com/191233.htm 在web应用中,对页面的访问控制通常通过程序来控制,流程为:登录 -> 设置session -> 访问受限页面时 ...
- nginx.conf配置及优化相关
nginx.conf配置文件内容 user www www; worker_processes ; worker_rlimit_nofile ; error_log /data/nginx/logs/ ...
- Java基础知识强化之集合框架笔记75：哈希表
1. 哈希表数据结构(数组): 2. 哈希表确定元素是否相同: (1)判断的是两个元素的哈希值是否相同 如果相同,再判断两个对象内容是否相同 (2)判断哈希值相 ...
- uva 784 Maze Exploration 染色 搜索水题 DFS
染色问题,其实就是看看图上某一点能扩散多少. 用DFS解决,因为BFS不是很熟 =-=...以后要多练. 提交后32ms,优化了一下,在递归前进行判定,优化到22ms,不是优化的很好... 代码: # ...
- Objective-C ,ios,iphone开发基础:ios数据库（The SQLite Database）,使用终端进行简单的数据库操作
SQLite 是一个轻量级的免费关系数据库.SQLite最初的设计目标是用于嵌入式系统,它占用资源非常少,在嵌入式设备中,只需要几百K的内存就够了,可以在(http://www.sqlite.org ...
- [改善Java代码]asList方法产生的List对象不可更改
上一个建议之处了asList方法在转换基本类型数组时候存在的问题,在看下asList方法返回的列表有何特殊的地方.看代码: import java.util.Arrays; import java.u ...
- Android从imageview中获得bitmap
第一种: 使用setDrawingCacheEnabled()和getDrawingCache()这两种方法,第一个是为了设置是否开启缓存,第二个就可以直接获得imageview中的缓存,一般来说需要 ...
- Learn Python The Hard Way学习笔记001
今天搜索了一下raw_input() 和 input()的区别,引用下原文部分内容 两个函数均能接收 字符串 ,但 raw_input() 直接读取控制台的输入(任何类型的输入它都可以接收).而对于 ...
- 开源而又强大的迷你型web服务器推荐
appweb显然是不二之选,看了下最新版,已经到了4了 下载下来,http://appwebserver.org/software/appweb-4.4.4-0-src.tgz,十几M,直接吓傻,离我 ...
- oracle的to_number、to_char、to_date用法
TO_DATE 是把字符串转换为数据库中得日期类型转换函数TO_CHAR 是把日期或数字转换为字符串TO_NUMBER 将字符转化为数字 TO_DATE使用TO_DATE函数将字符转换为日期TO_DA ...