ajax基本概念,方法
ajax Asynchronous javascript and xml
异步的 javascript and XML
ajax 是一门在不刷新网页的情况下,与服务器进行交互更新部分网页的技术;
传统网页更改网页内容,必须刷新整个网页,
使用ajax的页面,可以再不重新加载整个网页的情况下,更改部分内容
XMLHttpRequest 是Ajax 的基础
XMlHttpRequest 支持大多数浏览器,IE5和IE6使用ActiveXObject
所有现代浏览器 IE7+ 等常用浏览器 内建 XMlHttpRequest 对象
new XMLHttpRequest; 创建对象
老版本的 IE5 和 IE6 使用 ActiveXObject 对象
new ActiveXObject("Microsoft.XMLHTTP");
ajax 缓存问题
使用Math.random 生成0到1之间的随机数
让程序认为每次请求的不是一个页面
readystate 返回xmlhttp请求的当前状态
0(未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1(初始化) 对象已建立,尚未调用send方法
2(发送数据) send方法已调用,但是当前的状态及http未知
3(数据传送中) 以接受部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4(完成) 数据接受完成,此时,可以通过responseBody和responseText获取完整的回应数据
http常用状态码
200 服务器成功返回网页
310 请求的网页被永久移动,简称重定向
403 服务器拒绝请求,也称没有权限
404 请求的网页不存在
500 服务器遇到错误,无法完成请求
503 服务器暂时不可用,无法使用服务器
responseText 获得字符串响应数据
responseXML 获得XML响应数据
当请求被发送到服务器时,需要执行一些基于响应的任务
onreadystatechange 存储函数,当readyState属性改变时,就会调用该函数
readyState 返回xmlhttp 请求的当前状态
status 返回请求http状态码
在php里面通过get传递中文,中文需要转码urlencode()
在js里面通过get传递中文,中文需要转码encodeURLcomponent();
post
先设置http头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
传值 在 send 中
HTML 表单
上面的例子包含了一个简单的 HTML 表单,以及指向 JavaScript 的链接:
<html> <head> <script src="selectuser.js"></script> </head> <body><form> Select a User: <select name="users" onchange="showUser(this.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form><p> <div id="txtHint"><b>User info will be listed here.</b></div> </p></body> </html>
例子解释 - HTML 表单
正如您看到的,它仅仅是一个简单的 HTML 表单,其中带有名为 "users" 的下拉列表,这个列表包含了姓名,以及与数据库的 "id" 对应的选项值。
表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。
当用户选择数据时,执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。
换句话说:每当用户改变下拉列表中的值,就会调用 showUser() 函数。
JavaScript
这是存储在 "selectuser.js" 文件中的 JavaScript 代码:
var xmlHttpfunction showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null){alert ("Browser does not support HTTP Request")return} var url="getuser.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) }function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }function GetXmlHttpObject() { var xmlHttp=null; try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();} catch (e){//Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}} return xmlHttp; }
例子解释:
stateChanged() 和 GetXmlHttpObject 函数与 PHP AJAX 请求 那一节中的相同,您可以参阅其中的相关解释。
showUser() 函数
假如下拉列表中的项目被选择,函数执行:
- 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
- 定义发送到服务器的 URL(文件名)
- 向 URL 添加带有下拉列表内容的参数 (q)
- 添加一个随机数,以防服务器使用缓存的文件
- 当触发事件时调用 stateChanged
- 通过给定的 URL 打开 XMLHTTP 对象
- 向服务器发送 HTTP 请求
PHP 页面
由 JavaScript 调用的服务器页面,是名为 "getuser.php" 的简单 PHP 文件。
该页面用 PHP 编写,并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询,并以 HTML 表格返回结果:
<?php $q=$_GET["q"];$con = mysql_connect('localhost', 'peter', 'abc123'); if (!$con){die('Could not connect: ' . mysql_error());}mysql_select_db("ajax_demo", $con);$sql="SELECT * FROM user WHERE id = '".$q."'";$result = mysql_query($sql);echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>";while($row = mysql_fetch_array($result)){echo "<tr>";echo "<td>" . $row['FirstName'] . "</td>";echo "<td>" . $row['LastName'] . "</td>";echo "<td>" . $row['Age'] . "</td>";echo "<td>" . $row['Hometown'] . "</td>";echo "<td>" . $row['Job'] . "</td>";echo "</tr>";} echo "</table>";mysql_close($con); ?>
例子解释:
当查询从 JavaScript 被发送到这个 PHP 页面,会发生:
- PHP 打开到达 MySQL 服务器的连接
- 找到拥有指定姓名的 "user"
- 创建表格,插入数据,然后将其发送到 "txtHint" 占位符
在ajax发出请求时将要使用的类和方法作为参数传递
url = 'localhost/ajax.php?class=clasname&method=menhodname¶m=....'; xmlhttp.open('GET', url);
php中设置ajax接口文件,处理ajax请求
<?php $class = $_GET['class']; $method = $_GET['method'];unset($_GET['class']); unset($_GET['method']);include "$class.php"; $obj = new $class; $ret = call_user_func_array(array($obj, $method), $_GET);echo $ret;
JQ中的ajax的调用
</div> <div id="mainNav2" class="clearfix"><a href="index.php">首页<span></span></a><a class="ppmenu" menu_number="16" href="category.php?id=16" > 精品服装 <span></span></a><a class="ppmenu" menu_number="17" href="category.php?id=17" > 品牌鞋帽 <span></span></a><a class="ppmenu" menu_number="18" href="category.php?id=18" > 时尚箱包 <span></span></a><a class="ppmenu" menu_number="19" href="category.php?id=19" > 珠宝首饰 <span></span></a><a class="ppmenu" menu_number="22" href="category.php?id=22" > 化妆品 <span></span></a><a class="ppmenu" menu_number="21" href="category.php?id=21" > 母婴用品 <span></span></a><a class="ppmenu" menu_number="20" href="category.php?id=20" > 数码电子 <span></span></a><a class="ppmenu" menu_number="23" href="category.php?id=23" > 生活百货 <span></span></a><a class="ppmenu" menu_number="24" href="category.php?id=24" > 文化用品 <span></span></a><a class="ppmenu" menu_number="25" href="category.php?id=25" > 汽车用品 <span></span></a></div> <div id="submenu" style="position:absolute; z-index:100; border:1px solid #333; background:#fff; width:600px; display:none; border-top:0;"> </div> <script> $(document).ready(function() {var gwidth=$(document).width();$(".ppmenu").hover(function() {var lp = $(this).offset().left-160;if(lp<0) {lp=0;}if(lp+600 > gwidth) {lp = lp-300;}var cp = $(this).attr("menu_number");$("#submenu").css("margin-left", lp+"px");var url="/menu.php?name="+cp;$("#submenu").load(url, function() {$("#submenu").show();});}, function() {});$("#submenu").hover(function() {}, function() {$("#submenu").hide();}); }); </script>
ajax基本概念,方法相关推荐
- WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例
[0]开篇序言: 在<WCF分布式安全开发实践>系列文章之后,很想重新开启一个系列文章,来完善WCF的学习知识.思考很久,决定写一下WCF和AJAX学习的文章,取名为<WCF ...
- jQuery监控页面所有ajax请求的方法
jQuery实现监控页面所有ajax请求的方法 本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望 ...
- window.onbeforeunload() 事件调用ajax的解决方法
1 function window.onbeforeunload() { 2 3 var jhid = $("#ctl00_ContentBody_hfGuid").val(); ...
- w3c的ajax操作函数,关于ajax的使用方法_例题、ajax的数据处理
AJAX 的 关于ajax的使用方法_例题.ajax的数据处理 需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 //这个使用来显示提示信息的 ( ...
- jq中法可以发起ajax请求的方法有,jQuery实现监控页面所有ajax请求的方法
本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决 ...
- [js] 说说防止重复发送ajax请求的方法有哪些?各自有什么优缺点?
[js] 说说防止重复发送ajax请求的方法有哪些?各自有什么优缺点? // 方法一 防抖function debounce(f, ms) { let time; return function(){ ...
- ASP.NET MVC如何使用Ajax的辅助方法
前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书 ...
- jquery ajax缓存问题解决方法小结
jquery ajax缓存问题解决方法小结 参考文章: (1)jquery ajax缓存问题解决方法小结 (2)https://www.cnblogs.com/zhuyeshen/p/11599254 ...
- jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
- AJAX请求 $.post方法的使用
AJAX请求 $.post方法的使用 使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求.$.post方法是jQuery的实用工具方法. $.post方法语法 $.post( ...
最新文章
- 支付宝员工求问谷歌亚马逊员工:如能六点下班,学好英语就去投奔
- 201521123111《Java程序设计》第2周学习总结
- linix终端输入mysql,Linux服务器如何进入 MySQL 命令行
- 在Visual Studio 2010 里使用Nunit 进行Debug 测试
- 安卓makefile与linux,分析linux make命令与Makefile的区别
- java druid mysql连接池_java使用Druid连接池连接mysql
- MongoDB索引问题
- 惊!Kubernetes 将弃用 Docker,开发者们怎么办?
- 让nginx支持文件上传的几种模式
- 合流超几何函数_【CV】CVPR2020丨SPSR:基于梯度指导的结构保留超分辨率方法
- Apache启动失败
- 博文视点大讲堂28期:助你赢在软件外包行业
- 强大的反编译软件Hopper Disassembler for Mac控制流程图详解
- 重磅:GB/T 35273-2020《信息安全技术个人信息安全规范》最新解读
- ws协议绑定服务器域名,Websocket直接域名连接
- layui 表格表头最右侧多一列 解决办法
- mysql server has gone away_mysql server has gone away的解决方法
- Kafka安装详细教程
- python uppercase函数_字符串-短rot13函数-Python
- SpringBoot 配置系列:(二)多环境配置
热门文章
- 临时限速服务器系统ppt,临时限速系统讲解.pptx
- linux vnc 安装目录,Linux环境VNC服务安装、配置与使用(图)
- MySQL基础一些概念一些用法
- c语言课程设计做科普,【图片】发几个C语言课程设计源代码(恭喜自己当上技术小吧主)【东华理工大学吧】_百度贴吧...
- python 网络请求框架_python 框架
- 素数在c语言中怎么表示,请问素数怎么样表示
- java序列化和反序列化对象_java中的序列化与反序列化,还包括将多个对象序列化到一个文件中...
- c语言编译程序的软件下载,c语言编译器(wintc)
- 2021年江苏专转本计算机知识点,2021年江苏专转本计算机考试复习知识点归纳内部资料.doc...
- matlab 电压矢量开关,电压空间矢量研究及Matlab仿真