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("错误!!!");
} })
})

原生ajax 和jquery ajax 个人总结的更多相关文章

  1. 框架----Django之Ajax全套实例(原生AJAX,jQuery Ajax,“伪”AJAX,JSONP,CORS)

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  2. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  3. 原生js,jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  4. JQuery AJAX: 了解jQuery AJAX

    jQuery AJAX 一.简介1.AJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous ...

  5. AJAX和jQuery Ajax总结

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  6. AJAX,jQuery Ajax和Deferred

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  7. javascript ajax和jquery ajax

    一 进行ajax步骤: 1 获取dom值 2发送ajax请求 3返回成功进行前端逻辑处理 二 原生javascript的ajax <!DOCTYPE html> <html> ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

随机推荐

  1. 蓝桥网试题 java 基础练习 01字串

    ---------------------------------------------------------------------- 还括以 0.0 --------------------- ...

  2. 笑谈ArcToolbox (4) 非我族类

    笑谈ArcToolbox (4) 非我族类 by 李远祥 ArcToolbox的工具既能直接对数据源进行处理,也能对图层以及被选择要素进行处理.但有些数据看起来是空间数据,但实际上在处理的时候还是会出 ...

  3. Web Worker无阻塞UI的牛逼技术,html5,可惜无法敢于UI

    众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕 ...

  4. UE4中的集合:TSet容器

    好久没有更新了,最近一直在老家过年,网络不通的,今天才有时间更新一集. 一.TSet<T>是什么 UE4中,除了TArray动态数组外,还提供了各种各样的模板容器.这一节,我们就介绍集合容 ...

  5. Github+Hexo搭建静态博客

    开始 在安装hexo之前,必须确认你已经安装了Node.js和Git,并且注册了一个Github账号. 1.创建Github仓库 1) 仓库名为xxx.github.io 创建一个以"用户名 ...

  6. indexOf()--数组去重

    @(JavaScript) 数组去重方法有多中,这里列举出自己认为比较容易理解的方法. 思路: 创建一个新的空数组,用来存放去重后的新数组. 利用for循环循环遍历需要去重的数组. 利用indexOf ...

  7. 三层——c#版

    首先,向大家通知一个好消息--我的三层终于实现了!!!这两天,一直在调一个bug一直链接不上数据库,弄得我死的心都有了.就在昨天,当我把一个","改成了":"后 ...

  8. Spring BeanFactory实例化Bean的详细过程

    Spring中Bean的实例化是Bean生命周期的一个重要环节,通常Bean初始化后将不再改变. 那么Spring实例Bean的过程到底是怎么样的呢?!   要想获取到一个bean对象,得先通过Bea ...

  9. Top 10 Books For Advanced Level Java Developers

    Java is one of the most popular programming language nowadays. There are plenty of books for beginne ...

  10. BDD框架:behave学习记录

    本人学习的时候基本上是按照behave的tutorial教程一步步学习的,这篇文章就当Behave教程的翻译版吧(*^__^*) 嘻嘻--. 1         安装behave 安装好python后 ...