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

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

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

 

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

  1. window.onload=function(){
  2. var oBtn = document.getElementById("btn");
  3.  
  4. oBtn.onclick=function(){
  5. //打开浏览器
  6. /*
  7. 1.创建一个ajax对象
  8. ie6以下 ActiveXObject('Microsoft.XMLHTTP')
  9. */
  10. var xhr = null;
  11. // window属性下的XMLHttpRequest 是否存在 不存在就执行else 存在就直接执行,为的是兼容IE6
  12. /* if(window.XMLHttpRequest){
  13. var xhr = new XMLHttpRequest();
  14. }else{
  15. var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  16. }*/
  17. // 最好用下面的方法考虑兼容
  18. try{
  19. // 代码尝试执行这个块中的内容,如果有错误,则执行catch{},并且传入错误信息
  20. var xhr = new XMLHttpRequest();
  21. }catch(e){
  22. var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  23. }
  24. // 在地址栏输入地址
  25. /*
  26. open()方法
  27. */
  28. xhr.open('get','1.txt',true);
  29. // 提交
  30. xhr.send();
  31.  
  32. // 等待服务器返回内容
  33. xhr.onreadystatechange = function(){
  34.  
  35. if(xhr.readyState == 4){
  36. alert(xhr.responseText);
  37. }
  38. }
  39. }
  40. }

  

html:

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

  

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

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

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

2.post
理论上无限制

  1. enctype : 提交的数据格式,默认application/x-www-form-urlencoded
  2.  
  3. <form action="" method="">
  4. <input type="text" name="user">
  5. <input type="text" name="age">
  6. <input type="submit" value="提交">
  7. </form>

  

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

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

  

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

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

5.请求状态监控

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

  

6.数据请求和获取源码

  1. window.onload=function(){
  2. var oBtn = document.getElementById("btn");
  3.  
  4. // 用了setInterval()定时更新数据
  5. oBtn.onclick=setInterval(function(){
  6. // 打开浏览器,启用xml请求
  7. try{
  8. var xmh = new XMLHttpRequest();
  9. }catch(e){
  10. var xmh = new ActiveXObject('Microsoft.XMLHTTP');
  11. }
  12.  
  13. // 在地址栏输入地址
  14. xmh.open('get','test.php',true);
  15. // 发送请求
  16. xmh.send();
  17.  
  18. // 等待服务器返回内容
  19. xmh.onreadystatechange=function(){
  20. if(xmh.readyState == 4){
  21. // 以下是关键方法 JSON.parse();
  22. if(xmh.status == 200){
  23. // JSON.parse()将 JavaScript 对象表示法 (JSON) 字符串转换为对象
  24. var data = JSON.parse(xmh.responseText);
  25. var oUl = document.getElementById("ul1");
  26. var html = "";
  27. for(var i=0;i<data.length;i++){
  28. // 因为是二维数组所以需要这样写[i]['title']
  29. html += '<li><a href="">'+data[i]['title']+'</a> <span>'+data[i]['date']+'</span></li>'
  30. }
  31. oUl.innerHTML = html;
  32.  
  33. }else{
  34. // 弹出status的状态错误
  35. alert("出错,Err:"+xmh.status);
  36. }
  37. // alert(xmh.responseText);
  38. }
  39. }
  40.  
  41. },1000);
  42. }

  

后台test.php文件代码:

  1. <?php
  2. // 用数组的格式传数据过去
  3. $arr = array(
  4. array('title'=>'菠萝的海df,很美','date'=>'2015-6'),
  5. array('title'=>'菠萝的海d,很美a','date'=>'2015-6'),
  6. array('title'=>'菠萝的海,很美s','date'=>'2015-6'),
  7. array('title'=>'菠萝的海d,很美s','date'=>'2015-6'),
  8. array('title'=>'的海x,很美x','date'=>'2015-6'),
  9. array('title'=>'菠萝海,很美','date'=>'2015-06'),
  10. array('title'=>'菠萝的海,很美s','date'=>'2015-6')
  11. );
  12. // json_encode 用来把数据转换成json格式
  13. echo json_encode($arr);
  14. ?>

  

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

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

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

php代码:

  1. <?php
  2. $username = $_GET['username'];
  3. $pass = $_GET['pass'];
  4.  
  5. echo "欢迎,你的名字:{$username},密码:{$pass}";
  6. ?>

  

8.post方法解析

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

  HTML部分:

  1. <li>
  2. <div>
  3. <img src="data:images/1.png" alt="good">
  4. <p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
  5. </div>
  6. </li>
  7. <li>
  8. <div>
  9. <img src="data:images/1.png" alt="good">
  10. <p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
  11. </div>
  12. </li>
  13. <li>
  14. <div>
  15. <img src="data:images/1.png" alt="good">
  16. <p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
  17. </div>
  18. </li>
  19. <li>
  20. <div>
  21. <img src="data:images/1.png" alt="good">
  22. <p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
  23. </div>
  24. </li>
  25. <li>
  26. <div>
  27. <img src="data:images/1.png" alt="good">
  28. <p>森今夏浓浓的森女风来袭!柔软舒适的面料,柔和的粉蓝和白色,领口绑带,穿起来仙气十足!</p>
  29. </div>
  30. </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. Centos7 selinux关闭

    getenforce ---查看selinux服务是否开启 setenforce 0|1 0:Permissive 1:Enforcing 上面使用setenforce是临时的效果 永久关闭方法: v ...

  2. Leetcode算法系列(链表)之两数相加

    Leetcode算法系列(链表)之两数相加 难度:中等给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.如果,我们将 ...

  3. 推荐一个最懂程序员的google插件

    0.前言 很多人应该也和我一样,使用google浏览器时,它的主页是真不咋地,太单调了,用起来贼不爽,想整它很久了 一打开就是上面的样子,让我看起来真心真心不爽 当然:为了这个不关技术的瞎犊子事情,曾 ...

  4. Git使用:版本回退

    在Git中,我们可以用 git log命令查看我们修改的历史记录 C:\Users\Administrator\Documents\GitHub\learngit [master]> git l ...

  5. 在KALI以外的Linux上安装KALI上的工具(ubuntu,debian)

    添加KALI源 vim /etc/apt/sources.list 在sources.list中加入 deb http://http.kali.org/kali kali-rolling main c ...

  6. MRCTF2020 你传你🐎呢

    MRCTF2020 你传你 .htaccess mime检测 1.先尝试上传了一个文件,发现.jpg后缀的可以上传成功,但是用蚁剑连接时返回空数据 2.重新先上传一个.htaccess文件,让需要被上 ...

  7. 刚进公司,不懂GIt工作流的我瑟瑟发抖

    前言 不懂git工作流,被辞退了! 之前在看到这句话的时候,我刚实习入职不久,瑟瑟发抖.好巧不巧,今天又看到了类似的文章讲git重要性的. 眼下,学校导师安排给我的课题组了一个新的工程项目,使用git ...

  8. 【刷题-PAT】A1119 Pre- and Post-order Traversals (30 分)

    1119 Pre- and Post-order Traversals (30 分) Suppose that all the keys in a binary tree are distinct p ...

  9. gorm创建记录

    1.  简单创建记录 user := User{Name: "李四", Age: 88, Birthday: time.Now()} ret := db.Create(&u ...

  10. 开源免费的WordPress个人博客主题推荐

    二次元动漫类个人主题 Sakura 功能强大,美观大气,二次元动漫专属 演示地址:https://2heng.xin/theme-sakura/ 开源地址:https://github.com/mas ...