Ajax基础(一)--创建请求
浏览器创建ajax请求:
1、如果是Firefox、Opera、Safari等高级浏览器,可使用XMLHttpRequest()方式创建一个新的ajax请求对象。
如果是IE浏览器,则使用ActiveXObject('Microsoft.XMLHTTP')方式创建,具体代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax练习</title>
</head>
<body>
<script>
function doAjax (the_request) {
var request = null;
// 判断浏览器支持的请求方式
alert("点击");
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
if(request){
request.open('GET',the_request,true);
request.onreadystatechange = function(){
if(request.readyState==4){
if(request.status==200){
alert(request.responseText);
document.getElementById("view").innerHTML = request.responseText;
}
}
}
request.send(null);
}else{
alert("error");
} }else if(window.ActiveXObject){
request = new ActiveXObject('Microsoft.XMLHTTP');
request = new XMLHttpRequest();
if(request){
request.open('GET',the_request,true);
request.onreadystatechange = function(){
if(request.readyState==4){
if(request.status==200){
alert(request.responseText);
document.getElementById("view").innerHTML = request.responseText;
}
}
}
request.send(null);
}else{
alert("error");
}
}else{
alert("你的浏览器不支持ajax!");
}
}
</script>
<button onclick="javascript: doAjax('aa.txt')">请求</button>
<div id="view">
doAjax
</div>
</body>
</html>
另一种写法;
<html>
<head>
<title>Ajax初步入门视频课程</title>
</head> <body> <script type="text/javascript"> var xmlHttp = null; function readyStateChangeHandle()
{
if (xmlHttp.readyState ==4 ) {
if (xmlHttp.status == 200 ) {
document.getElementById('vv').innerHTML = xmlHttp.responseText;
}
}
} function ajaxFunction(the_request_url)
{
try {
xmlHttp = new XMLHttpRequest() ;
}
catch(e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
alert("您的浏览器不支持ajax") ;
return false;
}
}
} if (xmlHttp) {
xmlHttp.open('GET', the_request_url, true);
xmlHttp.onreadystatechange = readyStateChangeHandle;
xmlHttp.send(null);
} else {
alert('error');
}
} </script>
<input type="button" id="test" value="test" onclick="javascript:ajaxFunction('ajax-04.txt')" />
<br/><br/>
<div style="border:1px solid black;width:300px;height:250px;" id="vv">test ajax</div> </body> </html>
Ajax基础(一)--创建请求的更多相关文章
- 【JavaWeb】Ajax基础
Ajax介绍 Asynchronous JavaScript And XML(异步的JavaScript和XML): Ajax可以在不刷新页面的前提下,进行页面局部更新: Ajax不是新的技术,Aja ...
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础2
什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- Ajax基础知识(二)
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
- 原生 JS Ajax,GET和POST 请求实例代码
javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest ...
- AJAX基础_AJAX获取PHP数据
前言 本篇AJAX基础教程,只讲干货,拒绝废话. 全文通过两个实例来讲解AJAX的基本用法,第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据, 第2个实例是获取从服务器PHP文件的数据. ...
随机推荐
- python pip源配置,pip配置文件存放位置
https://blog.csdn.net/u013066730/article/details/54580789/ pip源配置文件可以放置的位置: Linux/Unix: /etc/pip.con ...
- sql中in和exists的区别
in 和exists in是把外表和内表作hash 连接,而exists 是对外表作loop 循环,每次loop 循环再对内表进行查询. 一直以来认为exists 比in 效率高的说法是不准确的.如果 ...
- django博客项目5:博客首页视图(2)
真正的 Django 博客首页视图 在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应.不过我们仅仅 ...
- linux虚拟机连不上网络
1.修改文件ifcfg-ens33 # 切换目录 [root@localhost ~]# cd /etc/sysconfig/network-scripts/ # 将ONBOOT修改为yes [roo ...
- 【Java编程】写入、读取、遍历Properties文件
在Java开发中通常我们会存储配置參数信息到属性文件.这种属性文件能够是拥有键值对的属性文件,也能够是XML文件.关于XML文件的操作,请參考博文[Java编程]DOM XML Parser 解析.遍 ...
- 关于 tf.nn.softmax_cross_entropy_with_logits 及 tf.clip_by_value
In order to train our model, we need to define what it means for the model to be good. Well, actuall ...
- python 多进程使用Queue通信的例子
import time from multiprocessing import Process,Queue MSG_QUEUE = Queue(5) def startA(msgQueue): whi ...
- Java泛型四:Java泛型总结
原文地址https://www.cnblogs.com/lwbqqyumidi/p/3837629.html 一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 publ ...
- 『NiFi 学习之路』入门 —— 下载、安装与简单使用
一.概述 "光说不练假把式." 官网上的介绍多少让人迷迷糊糊的,各种高大上的词语仿佛让 NiFi 离我们越来越远. 实践是最好的老师.那就让我们试用一下 NiFi 吧! 二.安装 ...
- Jconsle
1. jconsole 远程连接: JConsole很好用,可以解决很多疑难杂症.但远程连接需要设置一下Java opt才可以使用.以下是步骤: 1). 在java opt下添加如下内容: 如果是无须 ...