javascript _ajax 原理 初级
1.1使用php 方式获取时间:写一个time.php文件,保存在test 文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.querySelector("input");
oBtn.onclick = function(){
alert("<?php echo date('Y-m-d H:i:s'); ?>");
}
}
</script>
</head>
<body>
<input type="button" value="获取时间">
</body>
</html>
1.2 通过服务器方式打开文件:http://localhost/aaa/yuanli/test/time.php
运行结果:这里是使用PHP方式输出的时间
2. 写一个server.php 文件,保存在test文件夹中
<?php
header("Content-Type:text/html;charset=utf-8");
if(isset($_GET['name'])){
echo $_GET['name'].'(即编号'.$_GET['number'].')读到的时间是:'.date("Y-m-d H:i:s");
}else if(isset($_POST['name'])){
echo $_POST['name'].'(即编号'.$_POST['number'].')读到的时间是:'.date("Y-m-d H:i:s");
}else{
echo "传值错误,没有可以使用的参数!请重新传值。";
}
?>
通过服务器方式打开文件:http://localhost/aaa/yuanli/test/time.php
运行结果:因为没有传入POST或者GET的参数,所以结果如下:
3.1 写一个GET方式传递参数的getstyle_time.php文件,保存在test文件夹中
备注:这里在url 变量后面加入Math.random()函数,是为了兼容IE浏览器,这样才能进行更新ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var Obtn = document.querySelector("input.btn");
var Op = document.querySelector("p");
Obtn.onclick= function(){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = 'server.php?name=huanying2015&number=99&tt='+ Math.random();
xhr.open('GET',url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
Op.innerHTML = xhr.responseText;
};
};
xhr.send( null );
};
};
</script>
</head>
<body>
<div>
<input type="button" value="getstyle获取ajax" class="btn">
<p></p>
</div>
</body>
</html>
通过服务器方式打开文件:http://localhost/aaa/yuanli/test/getstyle_time.php
运行结果:
3.2 写一个POST方式传值的poststyle_time.php 文件,保存在test文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var Obtn = document.querySelector("input.btn");
var Op = document.querySelector("p");
Obtn.onclick = function(){
// 这里是为了兼容IE5,IE6浏览器(IE5/IE6 使用new ActiveXObject("Microsoft.XMLHTTP")来创建XMLHttPRequest对象)
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = "server.php";
xhr.open("POST",url,true);
// post 方式要加入一个表头信息,get方式就不需要了
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
Op.innerHTML = xhr.responseText;
};
};
// post方式传值在send()函数里进行
xhr.send("name=huanying2015&number=99");
}
}
</script>
</head>
<body>
<div>
<input type="button" class="btn" value="post获取ajax">
<p></p>
</div>
</body>
</html>
通过服务器方式打开文件:http://localhost/aaa/yuanli/test/poststyle_time.php
运行结果:
3.3 在上述get 方式中修改getstyle_time.php 文件中的 url = 'server.php?number=99&tt='+ Math.random(); 或者poststyle_time.php文件中的 xhr.send("number=99");
则将的不到时间结果,如下结果显示(get方式):
以上即是 javascript 调用后台数据的简单原理模式
javascript _ajax 原理 初级的更多相关文章
- JavaScript作用域原理(三)——作用域根据函数划分
一.一个for实例 <p id="scope3" style="color:red"></p> var pscope3 = docume ...
- JavaScript作用域原理(二)——预编译
JavaScript是一种脚本语言, 它的执行过程, 是一种翻译执行的过程.并且JavaScript是有预编译过程的,在执行每一段脚本代码之前, 都会首先处理var关键字和function定义式(函数 ...
- JavaScript作用域原理(一)——作用域链
一.作用域的描述 JavaScript权威指南中对作用域有一句很精辟的描述:“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.” 在JavaScript中,作用域的 ...
- 深入理解JavaScript Hijacking原理
最近在整理关于JavaScript代码安全方面的资料,在查关于JavaScript Hijacking的资料时,发现关于它的中文资料很少,故特意整理一下. 一.JavaScript Hijacking ...
- JavaScript内部原理实践——真的懂JavaScript吗?(转)
通过翻译了Dmitry A.Soshnikov的关于ECMAScript-262-3 JavaScript内部原理的文章, 从理论角度对JavaScript中部分特性的内部工作机制有了一定的了解. 但 ...
- How Javascript works (Javascript工作原理) (三) 内存管理及如何处理 4 类常见的内存泄漏问题
个人总结: 1.两种垃圾回收机制: 1)引用标记算法:如果检测到一个对象没有被引用了,就清除它. ***这种算法不能处理循环引用的情况*** 2)标记—清除算法:从根(全局变量)开始向后代变量检测,任 ...
- How Javascript works (Javascript工作原理) (二) 引擎,运行时,如何在 V8 引擎中书写最优代码的 5 条小技巧
个人总结: 一个Javascript引擎由一个标准解释程序,或者即时编译器来实现. 解释器(Interpreter): 解释一行,执行一行. 编译器(Compiler): 全部编译成机器码,统一执行. ...
- How Javascript works (Javascript工作原理) (一) 引擎,运行时,函数调用栈
个人总结:该系列文章对JS底层的工作原理进行了介绍. 这篇文章讲了 运行时:js其实是和AJAX.DOM.Settimeout等WebAPI独立分离开的 调用栈:JavaScript的堆内存管理 和 ...
- How Javascript works (Javascript工作原理) (九) 网页消息推送通知机制
个人总结: 1.介绍了网页消息推送通知机制 全文地址:https://github.com/Troland/how-javascript-works 这是 JavaScript 工作原理的第九章. 现 ...
随机推荐
- 搭建DUBBO项目解决DUBBO.XML标签报错的问题(转载)
https://www.cnblogs.com/ajax-li/p/7856393.html 报错内容: Multiple annotations found at this line: - cvc- ...
- [UE4]蓝图的颜色
一.蓝色:调用的函数或事件 二.绿色:纯函数 三.紫色:函数定义 四.灰色:宏 五.白色:执行线 六.事件的定义 另外还有数据类型的颜色: 执行线是白色,数据线颜色跟数据量类型一致.
- typescript静态属性,静态方法,抽象类,多态
/* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...
- PostgreSQL 一主多从(多副本,强同步)简明手册 - 配置、压测、监控、切换、防脑裂、修复、0丢失 - 珍藏级
参考来源: https://github.com/digoal/blog/blob/master/201803/20180326_01.md#postgresql-一主多从多副本强同步简明手册---配 ...
- [SQL]卸载数据库清理注册表方法regedit
.打开注册表. 开始——运行——regedit——确定 .然后找到下面的文件夹,删除掉: HKEY_CURRENT_USER\ Software\ Microsoft\ Microsoft SQL S ...
- 卷积神经网络之GoogleNet:inceptionV3模型学习
Rethinking the Inception Architecture for Computer Vision 论文地址:https://arxiv.org/abs/1512.00567 Abst ...
- form表单钩子,局部钩子和全局钩子
form表单源码解析: 局部钩子: 全局钩子:
- 【死磕 Spring】—— IoC 之深入理解 Spring IoC
本文主要基于 Spring 5.0.6.RELEASE 摘要: 原创出处 http://svip.iocoder.cn/Spring/IoC-intro/ 在一开始学习 Spring 的时候,我们就接 ...
- LeetCode 1:1. 两数之和
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...
- python-开放类优化内存性能
开放类:在运行期间,可动态向实例或类添加新成员,方法 1.实例不能添加方法到类,反之可以 class A: pass a = A() a.func = lambda x: x+1 a.func # & ...