原生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中的deferred使用方法
Mar 27 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现的分页插件完整示例
May 26 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php 操作调试的方法
2012/07/12 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Prototype Function对象 学习
2009/07/12 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
公司营业员的工作总结自我评价
2013/10/05 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
党课培训主持词
2014/04/01 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
上下班时间调整通知
2015/04/23 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python