ajax页面异步加载的使用

使用ajax非常简单,通常有两种方法:(一般见第一种使用情况最多,也比较方便)

1.JQuery下的ajax调用

function()

{

.ajax({

type:"POST",   //不同元素使用逗号隔开

url:http://www.baidu.com/Home/Index

data:{userName:"Danny",password:"123"},

success:function(){

...请求成功

}

error:function(){

...请求失败

}

})

2.普通javascript实现

(1)GET

var xmlhttp;

if (window.XMLHttpRequest)

{ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else {

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","baidu.com?name=1&pwd=123",true);
xmlhttp.send();

(2)POST

xmlhttp.open("POST","baidu.com",true);

//如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

我们使用接口调用后端数据时,可能会得到浏览器缓存的结果,而不是发出新的请求,因为服务器缓存了请求的到的数据。(在使用ajax分页时,ajax只执行一次,请求到数据后,再点击不访问接口,原来是缓存的问题)

如果我们需要为每一次请求得到新的数据,可以通过给链接加一个时间戳或随机数来解决。url:"baidu.com/Home/Index?t="+Math.random(); 或者加一个请求时间。

(这就是我们经常见到请求加随机数的原因,在使用qq登录时,请求链接就加了随机数。当初不明白为什么加随机数,原来是为了使每次请求链接不同,防止浏览器直接访问缓存数据)

除了时间戳、随机数改变链接外,ajax可以使用cache:false来保证获得新数据。

时间: 2024-10-10 21:33:53

ajax页面异步加载的使用的相关文章

SpringMVC+Jquery -页面异步加载数据

背景: 做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了.你用post实现异步加载数据.然后就...... ResultUtil.java 工具类: package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; import java.util.Map; import net.sf.json.JSO

实现页面异步加载

应用场景 平时我们用的最多的网页加载方式就是同步加载模式,也称阻塞模式,这种模式虽然安全,但是对于设计比较繁琐的网页采用同步加载会使网页的加载时间大大加长,所以也就出现了下面用到的异步加载模式. 使用 异步加载可以使用 XHR Injection. XHR Eval. Script In Iframe. Script defer属性. document.write(script tag)等,我当前采用的的是Script DOM Element方法,也就是动态向页面创建script标签异步加载JS

artdialog 异步加载页面 生成验证码

artdialog  异步加载一个页面 需求:例如现在好多网站的登录或注册 都是点击弹出一个层出来 然后在上面登录.注册 这个登录可能在网站的每个页面都会有,但是我们又不能在每个页面都这一段html加载出来不显示,到需要用的时候,在给shou出来,这样做于情于理都说!不!!过!!!去!!!!!! 恰好以前接触过artdialog  不多说上代码,(注意思维,代码是死的方法是活,解决需求不一定非要这个方法 ) 1.页面html代码 1 <head runat="server">

jsp页面的加载过程

1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. js代码时html代码的一部分,所以页面加载的时候是由上而下加载.所以js加载的顺序也就是页面中<script>标签出现的顺序.<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分. 2.1 在js脚本中定义的全局变量和函数,

javascript脚本异步加载的几种方式

一般而言,javascript脚本一般是建议放在body标签的底部,因为使用script标签加载js时,会停止加载后面的内容而停下来解析脚本并对页面进行渲染,使用src属性加载外部脚本也会造成这样的情况,这样的话,如果在head或者body的前面放入过多的script标签,并且内容很多的时候,会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白,给用户的体验会很差.但是如果所有的脚本都放在底部,又会造成dom加载完毕后有一段时间页面虽然能看到,但是和用户的交互却很差,因此需要让

关于页头页尾的异步加载

在网站中许多页面的页头页尾,都是一样的.采用异步加载,减少代码复用率: 采用PHP+html+jQuery 方法: 1.在名为header.php的页面中:写入页头部分的html <?php header('Content-Type:text/html;charset=UTF-8;'); ?> <div id="top"> <p>页头部分html代码</p> </div> 2.在页面中index.html中:指定要引入页头的位

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

【Ajax】实现注册页面判断用户名是否可用的提示—异步加载

效果如图 在注册或登录网站时,当我们输入错误格式的账号或信息时,会看到这种提示. 那怎么实现呢,通过ajax异步加载的方式,可以实现不刷新页面就显示出该提示. 实现 首先创建一个JSP,写一个简单的页面. 1 <body> 2 用户名:<input type="text" name="name" id="xxx"/><label></label><br> 3 年 龄:<input

使用Ajax异步加载页面时,怎样调试该页面的Js

前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析URL,把1.html异步加载到指定位置),不知道这样的框架叫什么名字. 那我们就会遇到一个问题,调试1.html的时候怎么办,通过浏览器掉出控制台找不到1.Html页面,无法加断点啊. 解决办法 在1.html 你所要调试位置加上一句代码  debugger;  就可以了,就是这么爽 可以调试了,可