js(三) ajax异步局部刷新技术底层代码实现
ajax 异步 javaScript and xml
开发五步骤:
1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery
2. 找到连接, http的method方法 GET|POST PUT DELETE
3. 注册监听器 有数据返回之后,就会自动调用该方法（不是一次 3次）
4. 发送请求 POST PUT delete 请求数据
5. 处理请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {
margin: 0;
padding: 0
}
</style>
</head>
<body>
<input onkeyup="tips(this)">
<div id="tip"></div>
<script>
function tips(th) {
//创建对象
var req = new XMLHttpRequest();
//打开链接
req.open("GET", "tips.jsp?k=" + th.value);
//注册监听器
req.onreadystatechange = function() {
//0.1.2.3.4 5中状态 我们只需要4(请求完成 )来接收返回来的数据即可 其他情况选择忽略
if (req.readyState == 4) {
//当页面状态200代表请求成功
if (req.status == 200) {
//将传回来的值因为包括页面中的空格，所以利用分割字符串
var arr = req.responseText.split(",");
//循环拼接字符串成ul输出
var str = "<ul>";//头
for (var i = 0; i < arr.length; i++) {
str += "<li>" + arr[i] + "</li>";//中间的li
}
str += "<ul>";//尾
//获取页面tip盒子输出值
document.getElementById("tip").innerHTML = str; }
}
}
//发送请求
req.send();
}
</script>
</body>
</html>
当我们提交类型为POST时，要注意：
1.open打开连接的方式要为(第一个参数)post并且(第二个参数)url为链接地址：
req.open("POST","tips.jsp");
2.设置请求头：
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3.发送请求的时候写上传输的值：
req.send("k="+th.value);
源码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {
margin: 0;
padding: 0
}
</style>
</head>
<body>
<input onkeyup="tips(this)">
<div id="tip"></div>
<script>
function tips(th) {
//创建对象
var req=new XMLHttpRequest();
//打开链接
//req.open("GET","tips.jsp?k="+th.value);
req.open("POST","tips.jsp");
//设置请求头
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//注册监听器
req.onreadystatechange=function(){
if(req.readyState==4){
if(req.status==200){
//将传回来的值因为包括页面中的空格，所以利用分割字符串
var arr = req.responseText.split(",");
//循环拼接字符串成ul输出
var str = "<ul>";//头
for (var i = 0; i < arr.length; i++) {
str += "<li>" + arr[i] + "</li>";//中间的li
}
str += "<ul>";//尾
//获取页面tip盒子输出值
document.getElementById("tip").innerHTML = str; }
}
}
req.send("k="+th.value);
} </script>
</body>
</html>
ajax+jquery：
<!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 src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script>
$(function(){
$("input").keyup(function(){
//console.log($(this).val());
//$.get("tips.jsp?k="+$(this).val(),function(data){
$.post("tips.jsp","k="+$(this).val(),function(data){
var arr = data.split(",");
var str = "<ul>";
for(var i=0;i<arr.length;i++){
str+="<li>"+arr[i]+"</li>";
}
str+="</ul>";
$("#tips").html(str);
});
})
})
</script>
<style>
*{margin:0;padding:0}
ul li{ list-style:none;
}
</style>
</head>
<body>
<input>
<div id="tips"></div>
</body>
</html>
js(三) ajax异步局部刷新技术底层代码实现的更多相关文章
- Ajax 异步局部刷新
Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...
- jquery ajax thinkphp异步局部刷新完整流程
环境:ThinkPHP3.2.3,jQuery3.2 前言: 在一般的网站中,都需要用到jquery或者其他框架(比如angular)来处理前后端数据交互,thinkphp在后台也内置了一些函数用 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- jQuery+ajax实现局部刷新
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...
- js中ajax异步问题
1.JS的执行顺序问题 浏览器是按照从上到下的顺序解析页面,因此正常情况下,JavaScript脚本的执行顺序也是从上到下的,即页面上先出现的代码或先被引入的代码总是被先执行,即使是允许并行下载Jav ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- [转载].NET ASP.NET 中web窗体（.aspx）利用ajax实现局部刷新
之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...
- Ionic Js三：下拉刷新
在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actions ...
随机推荐
- 【JZOJ3297】【SDOI2013】逃考(escape)
Mission 高考又来了,对于不认真读书的来讲真不是个好消息.为了小杨能在家里认真读书,他的亲戚决定驻扎在他的家里监督他学习,有爷爷奶奶.外公外婆.大舅.大嫂.阿姨-- 小杨实在是忍无可忍了,这种生 ...
- NOIP模拟 17.8.20
NOIP模拟17.8.20 A.阶乘[题目描述]亲爱的xyx同学正在研究数学与阶乘的关系,但是他喜欢颓废,于是他就制作了一个和阶乘有关系的数学游戏:给出两个整数 n,m,令 t = !n,每轮游戏的流 ...
- Leetcode872.Leaf-Similar Trees叶子相似的树
请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一颗叶值序列为 (6, 7, 4, 9, 8) 的树. 如果有两颗二叉树的叶值序列是相同 ...
- JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画
/** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...
- MAC+VS Code+C/C++调试配置
目录 VS Code C/C++ 环境配置 添加工作区文件夹 Say Hello world 关于三个配置文件--Debug 原地址 VS Code C/C++ 环境配置 添加工作区文件夹 虽然代码能 ...
- LeetCode208 Implement Trie (Prefix Tree). LeetCode211 Add and Search Word - Data structure design
字典树(Trie树相关) 208. Implement Trie (Prefix Tree) Implement a trie with insert, search, and startsWith ...
- ORA-03113: end-of-file on communication channel 解决方法
今天在测试数据库中对一个表插入了大量的数据, 导致数据库卡死 hang 住, 重启数据库后报错如下: C:\Documents and Settings\davidd>sqlplus " ...
- 通过JS操作CSS
动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- MUI - 引导页制作
引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...
- some daily
1. 一般div元素的background-color只覆盖到border,而其margin的颜色由外层元素的背景色决定. 2. 当设置了border-box以后,width=border+paddi ...