通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax。

顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了。

 笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2

 

一、JavaScript原生ajax
1.原生ajax代码:

window.onload=function(){
var oBtn = document.getElementById("btn"); oBtn.onclick=function(){
//打开浏览器
/*
1.创建一个ajax对象
ie6以下 ActiveXObject('Microsoft.XMLHTTP')
*/
var xhr = null;
// window属性下的XMLHttpRequest 是否存在 不存在就执行else 存在就直接执行,为的是兼容IE6
/* if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
// 最好用下面的方法考虑兼容
try{
// 代码尝试执行这个块中的内容,如果有错误,则执行catch{},并且传入错误信息
var xhr = new XMLHttpRequest();
}catch(e){
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 在地址栏输入地址
/*
open()方法
*/
xhr.open('get','1.txt',true);
// 提交
xhr.send(); // 等待服务器返回内容
xhr.onreadystatechange = function(){ if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
}

  

html:

<input type="button" value="按钮" id="btn">

  

2.表单
  表单:数据的提交
  action : 数据提交的地址,默认是当前页面
  method : 数据提交的方式,默认是get方式

1.get
  把数据名称和数据值用=连接,如果有多个的话,那么它会把
  多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面

  url长度限制的原因,我们不能通过get方式传递过多的数据

2.post
理论上无限制

enctype : 提交的数据格式,默认application/x-www-form-urlencoded

<form action="" method="">
<input type="text" name="user">
<input type="text" name="age">
<input type="submit" value="提交">
</form>

  

3. open()方法
  代码:xhr.open('get','1.txt',true);
参数
  1.打开方式
  2.地址
  3.是否异步[true为异步,false为同步]
异步:非阻塞 [前面的代码不会影响后面的代码执行]
同步:阻塞 [前面的代码会影响后面的代码执行]
阻塞:

<script src="jquery.js"></script>
$(function(){}) //如果Jque.js没有引用下面的文件执行也不得用,就阻塞了 非阻塞:
setTimeout(function(){
alert(1);
},2000); alert(2);
// 弹出2不会对我有影响,就非阻塞

  

同步和异步区别:
  当你后续的代码需要用到前面的东西的时候,你可以用同步,但异步用的多

4. send()发送请求
  xhr.send();

5.请求状态监控

onreadystatechange事件
・readyState属性:请求状态
-0(初始化)还没有调用open()方法
-1(载入)已调用send()方法,正在发送请求
-2(载入完成)send()方法完成,已收到全部响应内容
-3(解析)正在解析响应内容
-4(完成)响应内容解析完成,可以在客户端用了
・status属性:服务器(请求资源)的状态
・返回的内容
-responseText:返回以文本形式存放的内容
-reponseXML:返回XML形式的内容 代码分析:
// 等待服务器返回内容
/*
readyState : ajax工作状态
responseText : ajax请求返回的内容就被存在这个属性下面
on readystate change : 当readyState改变的时候触发
status : 服务器状态 http状态码
*/
xhr.onreadystatechange = function(){ if(xhr.readyState == 4){
// 状态值为200 ok的时候
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert('出错了,Err:'+xhr.status);
}
}
}

  

6.数据请求和获取源码

window.onload=function(){
var oBtn = document.getElementById("btn"); // 用了setInterval()定时更新数据
oBtn.onclick=setInterval(function(){
// 打开浏览器,启用xml请求
try{
var xmh = new XMLHttpRequest();
}catch(e){
var xmh = new ActiveXObject('Microsoft.XMLHTTP');
} // 在地址栏输入地址
xmh.open('get','test.php',true);
// 发送请求
xmh.send(); // 等待服务器返回内容
xmh.onreadystatechange=function(){
if(xmh.readyState == 4){
// 以下是关键方法 JSON.parse();
if(xmh.status == 200){
// JSON.parse()将 JavaScript 对象表示法 (JSON) 字符串转换为对象
var data = JSON.parse(xmh.responseText);
var oUl = document.getElementById("ul1");
var html = "";
for(var i=0;i<data.length;i++){
// 因为是二维数组所以需要这样写[i]['title']
html += '<li><a href="">'+data[i]['title']+'</a> <span>'+data[i]['date']+'</span></li>'
}
oUl.innerHTML = html; }else{
// 弹出status的状态错误
alert("出错,Err:"+xmh.status);
}
// alert(xmh.responseText);
}
} },1000);
}

  

后台test.php文件代码:

<?php
// 用数组的格式传数据过去
$arr = array(
array('title'=>'菠萝的海df,很美','date'=>'2015-6'),
array('title'=>'菠萝的海d,很美a','date'=>'2015-6'),
array('title'=>'菠萝的海,很美s','date'=>'2015-6'),
array('title'=>'菠萝的海d,很美s','date'=>'2015-6'),
array('title'=>'的海x,很美x','date'=>'2015-6'),
array('title'=>'菠萝海,很美','date'=>'2015-06'),
array('title'=>'菠萝的海,很美s','date'=>'2015-6')
);
// json_encode 用来把数据转换成json格式
echo json_encode($arr);
?>

  

7.get方法解析
/*
1.缓存 在url 后面连接一个随机数,时间戳
2.乱码 编码encodeURI
输出中文:+encodeURI('刘伟')+
*/
// 在地址栏输入地址

xmh.open('get','getNews.php?username='+encodeURI('刘伟')+'&pass=bbb&'+new Date().getTime(),true);

后台php用$_GET['']方法获取数据

php代码:

<?php
$username = $_GET['username'];
$pass = $_GET['pass']; echo "欢迎,你的名字:{$username},密码:{$pass}";
?>

  

8.post方法解析

/*
post方式,数据放在send()里面作为参数传递
*/
// 申明发生的数据编码类型
xmh.setRequestHeader('content-type','application/x-www-form-urlencoded');
// post没有缓存问题,get有缓存问题所以需要更新
// 中文也不用编码 get方式要编码encodeURI
xmh.send('username=leo&pass=222');

  HTML部分:

<li>
<div>
<img src="data:images/1.png" alt="good">
<p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
</div>
</li>
<li>
<div>
<img src="data:images/1.png" alt="good">
<p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
</div>
</li>
<li>
<div>
<img src="data:images/1.png" alt="good">
<p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
</div>
</li>
<li>
<div>
<img src="data:images/1.png" alt="good">
<p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
</div>
</li>
<li>
<div>
<img src="data:images/1.png" alt="good">
<p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
</div>
</li>

  

JavaScript的原生Ajax解析的更多相关文章

  1. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  2. javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  3. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  4. javascript实现原生ajax的方法

    <script> var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = ...

  5. javascript js原生ajax post请求 实例

    HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...

  6. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  7. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  8. ASP.NET学习笔记(5)——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  9. 浅谈JavaScript中的Ajax

    引言 作为一名WEB开发者,我想Ajax技术是一定需要掌握的.你也许平时没有使用JavaScript真正的写过Ajax.但是你一定使用过JQuery里面的相关函数来进行异步调用.今天我们就来介绍下原生 ...

随机推荐

  1. 下面哪些命令可以查看file1文件的第300-500行的内容?

    下面哪些命令可以查看file1文件的第300-500行的内容? cat file1 | tail -n +300 | head -n 200 cat file1| head -n 500 | tail ...

  2. 整理spring + mysql + redis + 测试 的配置格式 和源码

    经过多次整理,最终以这样的文件格式配置 目前配好的基本模板: 1 <?xml version="1.0" encoding="UTF-8"?> 2 ...

  3. centos7 alias别名永久生效

    进入/etc/profile.d/目录 cd /etc/profile.d/ 在profile.d目录随意创建一个sh文件,例如alias_test.sh vi alias_test.sh##里面的内 ...

  4. 编写Hive的UDF(查询平台数据同时向mysql添加数据)

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6812629187518530052/ 可能会有一些截图中会有错误提示,是因为本地的包一直包下载有问题,截完图已经下 ...

  5. SSM实现支付宝支付

    学习支付宝支付 一.支付宝测试环境代码测试 1.下载电脑网站的官方demo: 下载地址:https://docs.open.alipay.com/270/106291/ 2.下载解压导入eclipse ...

  6. R语言服务器程序 Rserve详解

    R语言服务器程序 Rserve详解 R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大. R语言作为统计学一门语言,一直在小众领域闪耀着光芒.直到 ...

  7. Java对象内存模型

    2 Java对象内存模型 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header). 实例数据(Instance Data)和对齐填充(Padding). 在 JVM ...

  8. MobaXterm中文乱码问题

    现在Xshell和SecureCRT都要收费,本着不用盗版的原则,同时需要标签管理session,快捷命令等功能,最后选择了MobaXterm. 但是使用后发现中文会乱码.后按照博客的方法,修改了终端 ...

  9. jdk11+安装(win)

    jdk11+安装(win) 官网下载 官网下载地址:https://adoptopenjdk.net/index.html 选择合适的版本 安装 运行下载的 MSI 包 下一步 选择安装位置,下一步 ...

  10. http头文件

    http 文件头详解 HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写, 它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采 ...