<!-- 使用原生Ajax 和 $.ajax 实现局部刷新的过程 -->
<!-- 封装通用XMLHttpRequest对象 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建XMLHttpRequest</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 80vw;
height: 75vh;
margin: auto;
background: #4785ab;
overflow: hidden;
position: relative;
}
div a{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
div a img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
width: 98%;
height: 96%;
}
</style>
<script type='text/javascript' src="js/jquery.js"></script>
</head>
<body>
<div class="banner"></div>
<div class="container"></div>
<script type="text/javascript">
// 如何使用Ajax?
// 要完整实现一个AJAX异步调用和局部刷新，通常需要三个步骤：
// 一，创建XMLHttpRequest对象，也就是创建一个异步调用对象。
// 二，创建一个新的HTTP请求，并指定该HTTP请求的方法，URL。
// 三，设置响应HTTP请求状态变化的函数。
// 四，发送HTTP请求
// 请求发往服务器--> 服务器根据请求生成响应--> 传回给xhr对象
// 语法：send(string) 将请求发送到服务器端，string仅用于POST请求
// 注意事项：仅POST请求时可以传入参数，不需要则发送null,调用send方法，请求被发往服务器。
// 五，获取异步调用返回的数据
// 在收到相应后相应数据会填充到xhr对象的属性，有四个相关属性会被填充：
// 1，responseText 从服务器进程返回数据的字符串形式
// 2，responseXML 从服务请进程返回的DOM兼容的文档数据对象
// 3，status 从服务器返回数字代码，如：404(未找到)，200(已就绪)
// 4，status Text 伴随状态码的字符串信息
// 六，使用JavaScript和DOM实现局部刷新

//创建一个新的HTTP请求
// 语法：open(method,url,async);
// 功能：创建HTTP请求，规定请求的类型，URL及是否异步处理请求
// method: 请求类型 GET 或者 POST，不指定时默认GET。
// GET：更简单，更快，大部分情况下可以使用，有数据量限制，不用考虑安全性，不传参数。
// POST: 可以传string参数，以下情况必须使用POST
// 1，无法使用缓存文件(更新服务器上的文件或数据库)
// 2，向服务器发送大量数据(POST没有数据量限制)
// 3，发送包含未知字符的用户输入时，POST比GET更稳定更可靠。(考虑安全性问题)
// url: 文件在服务器上的位置，必须指定的参数，该文件可以是任何类型的文件,
// 如：.txt .xml 服务器脚本(.asp .php),在传回相应之前，在服务器上执行任务。
// async: true(异步)或false(同步)
// 同步处理：提交请求--> 等待服务器处理--> 处理完毕返回(期间客户端浏览器不能做任何事情)
// 说白了就是要排队等候，一个一个处理。
// false: 客户端要等待服务器返回消息后才能执行其他操作。
// 异步处理：请求通过事件处理--> 服务器处理(浏览器可以做其他事情)--> 处理完毕(不用返回)
// true: 默认值，客户端不用等待服务器的响应，可以直接做其他事情。
//

// xmlhttp就是XMLHttpRequest的实例
// 使用POST请求时需要做的一个动作：
// 如果需要像HTML表单那样POST数据，需要使用setRequestHeader()来添加HTTP头，
// 然后在send()方法规定希望发送的数据。
// 语法：xmlhttp.setRequestHeader(header,value);
// 使用： xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//注意事项：
//open不会向服务器发送真正请求，它相当于初始化请求并准备发送，
//只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。

// 一，创建XMLHttpRequest对象
//--------两种方式封装通用的XMLHttpRequest对象-----------
//第一种，比较全面点，也复杂点。
//封装通用的xhr对象，兼容各个版本
/*function createXHR(){
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7,chrome,firefox,opera等等
if (typeof XMLHttpRequest!='undefined') {
return new XMLHttpRequest();//返回XMLHttpRequest对象
}else if(typeof ActiveXObject!='undefined'){
//将所有可能出现的版本都放在数组中进行遍历
var xhrArr=['Mrcrosoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍历XMLHttpRequest对象
var len=xhr.length,xhr;
for (var i = 0; i < len; i++) {
try{
//创建XMLHttpRequest对象
xhr=new ActiveXObject(xhrArr[i]);
break;
}catch(e){
//如果抛出错误，那么说明不支持该版本，则不进行任何操作，直到找到合适版本即可。
}
}
return xhr;
}else{
throw new Error("您的浏览器不支持XMLHttpRequest！");
}
}
var xhr=createXHR();
console.log(xhr);//输出XMLHttpRequest，则创建成功，否则失败*/

//第二种，相对简单，但是也可以满足主流浏览器的使用。
//封装通用的XMLHttpRequest对象
function createXHR(){
var xhr;
if (window.XMLHttpRequest) {
//如果支持XMLHttpRequest，则实例化对象
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
//创建XMLHttpRequest实例
var xhr=createXHR();
var data=null;//用于接收服务器返回的数据
//console.log(xhr);//输出XMLHttpRequest则创建成功，否则失败

//响应XMLHttpRequest对象状态变化的函数。
//onreadystatechange 在 readystatechange属性值发生改变时触发事件
xhr.onreadystatechange=function(){
//xhr.readyState 不同值的意思：
// 0 没有初始化，没有用send方法
// 1 已经调用send方法正在发送请求
// 2 send方法执行完成，
// 3 正在解析响应的内容
// 4 异步调用成功，响应内容解析完成
//异步调用成功，响应内容解析完成，意为着可以在客户端调用
if (xhr.readyState===4) {
// xhr.status<=200 && xhr.status<300 表示异步调用成功，即数据交换是成功的
// xhr.status===304 表示请求资源没有被修改，可以使用浏览器缓存(说明之前已经请求成功过，且请求资源没有改变过)
if ((xhr.status>=200 && xhr.status<300) || xhr.status===304) {
//获取服务器返回的数据
// console.log(xhr.responseText);

//eval()是原生javascript代码进行string转换成 object对象
//而这里是对JSON数据进行转换
//eval()用于把string(json数据)字符串转化为对象，
//就可以使用 obj.属性 进行取值了。
//在转化时，一定要在json数据前后加上小括号，这样转化成一个对象，否则报错。
/*data=eval("("+xhr.responseText+")");
console.log(data.code);
console.log(data.people);//返回的是一个数组对象，通过遍历和index来访问其中的值
console.log(data.people[3]);//返回数组第四个值：{name: "weidejun", age: "31"}*/
//以下是JSON的两个互转的方法：JSON.parse(),JSON.stringify() 这两个方法互为逆转。
data=JSON.parse(xhr.responseText);
// console.log(data);//返回JSON数据的一个数组[...]
// console.log(data.people);//返回people属性值的一个数组

//将JSON.parse(xhr.responeText)返回的原生javascript值
//逆转会JSON字符串，即序列化为JSON字符串。
// console.log(JSON.stringify(data));

//把返回的服务器数据渲染到DOM对象中
renderDataToDom();
}
}
}

//以下是使用GET方法进行发送请求
//创建HTTP请求，用get方法传参数直接写在url后面，?name=zs&psd=1234 如下：
xhr.open('get','./js/slider.json',true);
//发送请求，使用get()方法不需要在send中传递参数，那么直接给一个null即可。
xhr.send(null);//如果，使用get方法，尝试使用xhr.send()看看能不能成功执行。

//把返回的服务器JSON数据渲染到DOM对象中
function renderDataToDom(){
var pictures=data.picture;
var len=pictures.length;
var str="";
var div=document.getElementsByTagName('div')[0];
for (var i = 0; i < len; i++) {
// console.log(pictures[i]);
console.log(pictures[i].linkUrl);
console.log(pictures[i].picUrl);
str+="<a href='"+pictures[i].linkUrl+"'><img src='"+pictures[i].picUrl+"'></a>";
div.innerHTML=str;
}
}
/*//以下是使用POST方法进行发送数据
//创建HTTP请求，用post方法传参数时，把参数写到send({name:'zhangsan',psd:'123456'})方法中的，
//如果不需要传参数，那么在直接：xhr.send(null)，即可。如下：
xhr.open('get','./js/slider.json?name=zhangsan&psd=1234567',true);
//发送请求
xhr.send({name:'zhangsan',psd:'123456'});
//设置http头部信息
xhr.setRequestHeader('Content-type','application/x-www.x-www-form-urlencoded');*/

//以下是jquery封装好的$.ajax方法，简单好用，尝试用自己封装。
$.ajax({
url:"./js/slider.json", //请求地址
type:"get", //请求方式
async:true, //异步同步
dataType:"json", //获取数据格式
success:function(imgData){ //请求成功后的回调函数
JSrenderDataToDom(imgData)
// console.log(imgData.picture);
}
})
function JSrenderDataToDom(data){
var str="";
$.each(data.picture, function(index,obj) {
str="<a href='"+obj.linkUrl+"'><img src='"
+obj.picUrl+"'/></a>";
$(".container").html(str);
});
}
</script>
</body>
</html>
<!--
1，在使用Ajax时，必须先安装MAMP(即：Apache Server 和 MySQL Server)
2，配置Web Server 网页的默认访问路径，同时配置本地端口号：80
3，编写Ajax页面时，页面必须放在该默认路径下面文件夹里面才可以正常访问
4，且访问时，不能直接点击文件打开，而是通过MAMP软件页面的---》
Open WerStart page 来打开 如：http://localhost:81 等价于：http://localhost:81/index.html
访问其他页面：http://localhost:81/xxx.html
5，打开页面后，可以使用开发者工具---Network---All---刷新页面
---点击localhost---查看各种参数 如；
Request URL: http://localhost:81/ 请求地址
Request Method: GET 请求的方法
Status Code: 200 OK 请求的状态
Remote Address: 127.0.0.1:81 远程访问地址

xmlhttprequst有以下两个方法：
1.open() 方法：open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。xmlHttp.open("GET","test.php",true);
2.send() 方法：send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：xmlHttp.send(null);

服务器返回状态和状态码：
200 OK
请求正常处理完毕
204 No Content
请求成功处理，没有实体的主体返回
206 Partial Content
GET范围请求已成功处理
301 Moved Permanently
永久重定向，资源已永久分配新URI
302 Found
临时重定向，资源已临时分配新URI
303 See Other
临时重定向，期望使用GET定向获取
304 Not Modified
发送的附带条件请求未满足
307 Temporary Redirect
临时重定向，POST不会变成GET
400 Bad Request
请求报文语法错误或参数错误
401 Unauthorized
需要通过HTTP认证，或认证失败
403 Forbidden
请求资源被拒绝
404 Not Found
无法找到请求资源（服务器无理由拒绝）
500 Internal Server Error
服务器故障或Web应用故障
503 Service Unavailable
服务器超负载或停机维护 -->
还差两个问题没解决：
1，自己封装$.ajax方法
2，跨域

<!-- 什么是JSON?
1，JSON： JavaScript Object Nonation 全称：JavaScript对象表示法
2，是一种数据交换格式，不是编程语言，用于读取结构化数据
3，2001年提出，目的是取代繁琐笨重的XML格式

JSON语法可以表示以下三种类型的值：
一，简单值：
1，用法与JavaScript用法相同，可以是：字符串，数值，布尔值，null
字符串必须使用双引号，不能使用单引号，数值必须是十进制，
不能使用NaN和Infinify，还有undefined值。
二，对象：
1，对象是一种复杂的数据类型，表示一组有序的键值对，而每个键值对中的值
可以是简单值，也可以是复杂数据类型的值。
2，JSON中对象的键名必须放在双引号里面，因为JSON不是javascript语句，
所以没有末尾的分号。
3，对于同一个对象中不应该出现两个同名属性
三，数组：
1，数组是一种复杂数据类型，表示一组有序的值的列表，
可以通过数值索引来访问其中的值。
2，数组或对象最后一个成员的后面，不能加逗号。 -->

<!-- ajax返回的JSON数据转化为object对象进行数据操作的方法：
1，JSON.parse(服务器返回的数据) 将JSON字符串转化为Object对象
2，JSON.stringify(服务器返回的数据) 将一个值转换为字符串，该字符串符合JSON格式，
并且可以被JSON.parse(服务器返回的数据)方法还原。

JSON总结：
1，JSON之所以流行，因为可以把JSON数据结构解析为有用的javascript对象。
2，JSON对象的两个方法：JSON.stringify(服务器返回的数据) 和 JSON.parse(服务器返回的数据) 分别用于：
JSON.stringify(服务器返回的数据) 把javascript对象序列化为JSON字符串
JSON.parse(服务器返回的数据) 把JSON字符串解析为原生的javascript值
3，javascript的eval(服务器返回的数据)类似于JSON.parse(服务器返回的数据),可以将JSON字符串转换为JSON对象，
但是，eval()可以执行不符合JSON格式的代码，有可能包含恶意代码，所以少用。

// 如何使用Ajax?
// 要完整实现一个AJAX异步调用和局部刷新，通常需要三个步骤：
// 一，创建XMLHttpRequest对象，也就是创建一个异步调用对象。
// 二，创建一个新的HTTP请求，并指定该HTTP请求的方法，URL。
// 三，设置响应HTTP请求状态变化的函数。
// 四，发送HTTP请求
// 请求发往服务器 服务器根据请求生成响应 传回给xhr对象
// 语法：send(string) 将请求发送到服务器端，string仅用于POST请求
// 注意事项：仅POST请求时可以传入参数，不需要则发送null,调用send方法，请求被发往服务器。
// 五，获取异步调用返回的数据
// 在收到相应后相应数据会填充到xhr对象的属性，有四个相关属性会被填充：
// 1，responseText 从服务器进程返回数据的字符串形式
// 2，responseXML 从服务请进程返回的DOM兼容的文档数据对象
// 3，status 从服务器返回数字代码，如：404(未找到)，200(已就绪)
// 4，status Text 伴随状态码的字符串信息
// 六，使用JavaScript和DOM实现局部刷新
=============以下六个步骤就是使用原生的javascript编写的ajax过程=============
一：//封装通用的XMLHttpRequest对象
function createXHR(){
var xhr;
if (window.XMLHttpRequest) {
//如果支持XMLHttpRequest，则实例化对象
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

三：xhr.onreadystatechange=function(){
//异步调用成功，响应内容解析完成，意为着可以在客户端调用
if (xhr.readyState===4) {
// xhr.status<=200 && xhr.status<300 表示异步调用成功，即数据交换是成功的
// xhr.status===304 表示请求资源没有被修改，可以使用浏览器缓存(说明之前已经请求成功过，且请求资源没有改变过)
if ((xhr.status>=200 && xhr.status<300) || xhr.status===304) {
五，获取异步调用返回的数据
//以下是JSON的两个互转的方法：JSON.parse(),JSON.stringify() 这两个方法互为逆转。
data=JSON.parse(xhr.responseText);

六： //封装渲染函数，把返回的服务器数据渲染到DOM对象中
renderDataToDom();
}
}
}

习惯把 二 和 四 写在一起
二：//以下是使用GET方法进行发送请求
//创建HTTP请求，用get方法传参数直接写在url后面，?name=zs&psd=1234 如下：
xhr.open('get','./js/slider.json',true);

四：//发送请求，使用get()方法不需要在send中传递参数，那么直接给一个null即可。
xhr.send(null);//如果，使用get方法，尝试使用xhr.send()看看能不能成功执行。

六：//把返回的服务器JSON数据渲染到DOM对象中
function renderDataToDom(){
var pictures=data.picture;
var len=pictures.length;
var str="";
var div=document.getElementsByTagName('div')[0];
for (var i = 0; i < len; i++) {
// console.log(pictures[i]);
console.log(pictures[i].linkUrl);
console.log(pictures[i].picUrl);
str+="<a href='"+pictures[i].linkUrl+"'><img src='"+pictures[i].picUrl+"'></a>";
div.innerHTML=str;
}
}
===========以下是jquery封装好的$.ajax方法，简单好用，尝试自己封装=============

//以下是jquery封装好的$.ajax方法，简单好用，尝试用自己封装。
$.ajax({
url:"./js/slider.json", //请求地址
type:"get", //请求方式
async:true, //异步同步
dataType:"json", //获取数据格式
success:function(imgData){ //请求成功后的回调函数
JSrenderDataToDom(imgData)
// console.log(imgData.picture);
}
})
function JSrenderDataToDom(data){
var str="";
$.each(data.picture, function(index,obj) {
str="<a href='"+obj.linkUrl+"'><img src='"
+obj.picUrl+"'/></a>";
$(".container").html(str);
});
} -->
========以下是xxx.json实例==========
{
"code":0,
"picture":[
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/1.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/2.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/3.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/4.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/5.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/6.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/7.jpg"
}
]
}
==========================

ajax 页面无刷新的更多相关文章

  1. repeater绑定dropdownlist,jquery+ajax页面无刷新，修改dropdownlist默认值

    html代码: <td>                        <asp:HiddenField ID="hiddenchuli" Value='< ...

  2. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  3. HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  4. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  5. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  6. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  7. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  8. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  9. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

随机推荐

  1. 20191011-构建我们公司自己的自动化接口测试框架-testrun最重要的模块

    testrun模块呢就是最终自动化测试入口,调用前面封装的各个模块主要流程是: 1. 获取测试集种待执行的测试用例 2. 处理测试用例获取的数据,包括转换数据格式,处理数据的中的关联等 3. 处理完数 ...

  2. asp.net core-9.依赖注入的使用

    http://www.jessetalk.cn/2017/11/06/di-in-aspnetcore/

  3. root用户和sudo使用root权限的区别（转）

    百度百科:https://baike.baidu.com/item/sudo/7337623?fr=aladdin sudo指令 功能: 以root的身分执行命令 语法: sudo 其他指令 用户: ...

  4. 夯实基础：彻底搞清楚Cookie 和 Session 关系和区别（转）

    原文地址:http://www.sohu.com/a/281228178_120047080 网络请求中的cookie与set-Cookie的交互模式和作用:https://my.oschina.ne ...

  5. 奇妙的算法【11】LeetCode-专属算法面试题汇总

    这个是LeetCode上面的编程训练专项页面,地址:https://leetcode-cn.com/explore/interview/card/top-interview-quesitons-in- ...

  6. 结合python实现的netcat与python实现的tcp代理，建立一个流量隧道

    在proxy中 python2 proxy.py 127.0.0.1 3334 192.158.1.111 80 true 作为服务器在本地3334端口进行监听, 作为客户端连接远程web服务器192 ...

  7. nodejs入门API之url模块+querystring模块

    关于URL的一些基础内容 URL模块的API解析 URL的参数URLSearchParams类 querystring模块 一.关于URL的一些基础内容 1.1 定义: 在WWW上,每一信息资源都有统 ...

  8. c去除空格 小写转大写

    int isalnum(int c); //字母或数字 int isalpha(int c); //英文字母 int isascii(int c); //ASCII 码字符(0 到127) int i ...

  9. leetcode-64. 最小路径和 · vector + DP

    题面 Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right wh ...

  10. 3.Redis数据类型

    Redis的五大数据类型: 1.string(字符串) string是redis最基本的类型,你可以理解成与Memcached一模一样的类型,一个key对应一个value. string类型是二进制安 ...