原生Aajax 和jQuery Ajax 写法个人总结


Posted in jQuery onMarch 24, 2017

AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

一个完整的HTTP请求:由请求方式、URL、请求头和请求体组成;

一个完整的HTTP响应:由状态码、响应头、响应体组成;

http状态码:1开头 代表信息类 正在处理、2开头代表请求成功200 OK、3开头代表重定向、4开头代表客户端错误 404、5开头代表服务器错误;

响应状态:0,1,2,3,4  4代表响应成功。

open方法中的第三个参数代表是否异步(TRUE为异步   FALSE为同步)。

当请求方式为POST时,open方法后面要设置请求头(xmlhttp.setResponseHeader(""))send方法中要加入;

原生JavaScript写法:

var xhr;
  function rukou()//入口函数
  {
   xhr=getxhr();
   if(xhr==null)
   {
    alert("浏览器不支持!");
   }
   var url="";
   xhr.onreadystatechange=fanhui;
   xhr.open("GET",url,true);
   xhr.send(null);
  }
  function fanhui()//请求成功的回调函数
  {
   if(readyState==4)
   {
    document.getElementById("xx").innerHTML=xhr.responseText;
   }
  }
  function getxhr()//获取xmlhttp对象
  {
   xhr=null;
   try{
    xhr=new XMLHttpRequest();
   }
   catch(e)
   {
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
  }

jQuery中的ajax写法:

$("#tijiao").click(function(){
  $.ajax({
   type:"GET",
   url:"http://localhost/AJAX/test.php?name="+$("#name").val()+"&phone="+$("#phone").val(),
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("错误!!!");
   }
  })
 })
$("#tijiao").click(function(){
  $.ajax({
   type:"POST",
   url:"test.php",
   data:{
    name:$("#name").val(),
    phone:$("#phone").val()
   },
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("错误!!!");
   }
  })
 })

 以上所述是小编给大家介绍的原生Aajax 和jQuery Ajax 个人总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
You might like
PHP实现服务器状态监控的方法
2014/12/09 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
用js实现放大镜效果
2020/10/28 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python的Tqdm模块的使用
2018/01/10 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python3监控疫情的完整代码
2020/02/20 Python
英国航空官网:British Airways
2016/09/11 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年教师新年寄语
2014/12/08 职场文书
工程资料员岗位职责
2015/04/13 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server