jQuery Ajax 学习（转）

Ajax全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）
特点：在不必刷新整个网页的情况下实现局部更新，带来更好的用户体验。
因为XMLHttpRequest（XHR）对象的出现才有了异步的概念。通过XMLHttpRequest对象实现后台和服务器进行数据的交换而不必刷新整个页面。

概念介绍

  • 运用HMTL和CSS来实现页面，表达信息。
  • 运用XMLHttpRequest和Web服务器进行数据的异步交换。
  • 运用JavaScript操作DOM元素，实现动态局部刷新。

实例化一个XHR对象

var request =new XMLHttpRequest();

对于IE6及更老版本的IE：

var request;
if(windows.XMLHttpRequest){
  request=new XMLHttpRequest();//IE7+,Fiefix,Chrome,Opera,Safari...
}
else{
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

"HTTP请求"概念介绍

一个完整的HTTP请求过程，通常需要下面7个步骤：

  1. 建立TCP连接
  2. Web浏览器向Web服务器发送请求命令
  3. Web浏览器发送请求头信息
  4. Web服务器应答
  5. Web服务器发送应答头信息
  6. Web服务器向浏览器发送数据
  7. Web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

  1. HTTP请求的方法或者动作，Get/Post
  2. 正在请求的地址URL
  3. 请求头，包含一些客户端环境信息，身份验证信息等
  4. 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息

GET与POST
GET：一般用于信息获取
使用URL传递参数（变量会放在URL里边）
对所发送信息的数量也有限制，一般在2000个字符
幂等，执行N次与执行1次效果相同，都不会改变数据库的信息
POST：一般用于修改服务器上的资源
对所发送信息的数量无限制

一个HTTP响应一般由三部分组成：

  1. 一个数字和文字组成的状态码，用来告诉客户端请求是成功还是失败
  2. 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等
  3. 响应体，也就是响应正文，服务器传来的内容
HTTP状态码分类
分类 分类描述
1XX 信息 服务器收到请求，需要请求者继续执行操作
2XX 成功 操作被成功接收并处理，例如 200 OK
3XX 重定向 需要进一步的操作以完成请求
4XX 客户端错误 请求包含语法错误或无法完成请求，例如 404 NOT FOUND
5XX 服务器错误 服务器在处理请求的过程中发生了错误 例如 500

XHR发送请求

  • open(method,url,async) async->true异步(默认)/false同步
  • send(string)
    例如：

    request.open("GET","get.php",true);
request.send();//因为GET请求内容一般在url中，所以send()可以为空，但是post请求需要在send()中添加信息
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头信息(一定是写在open()和send()中间)
request.send("name=王二狗&sex=男");

XHR取得响应

  • responseText：获取字符串形式的响应数据
    responseXML：获取XML形式的响应数据 status和statusText：以数字和文本形式返回HTTP状态码
  • getAllRespondseHeader()：获取所有的响应报头
  • getResponseHeader()：查询响应中的某个字段的值

  • 监听readyState属性

    • 0：请求未初始化，open还没有调用
    • 1：服务器连接已经建立，open已经调用了
    • 2：请求已接收，也就是接收到头信息了
    • 3：请求处理中，也就是接收到响应主体了
    • 4：请求已完成，且响应已就绪，也就是完成响应了
var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
      if(request.readyState===4 && request.status===200){
      //做一些事情request.responseText
    }
}

举个栗子(基于之前的数据库，有学生表)~

【前端】

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#search").click(function() {
            var request = new XMLHttpRequest();
            request.open("GET", "/Ajax/Details?id=" + parseInt($("#keyWord").val()), true);    //通过GET方法去请求AjaxController下面的Details方法，并传入id的值作为查询条件
            request.send();
        });
    })
</script>
<label>请输入要查询的学生编号：</label>
<input type="text" id="keyWord"/>
<button id="search">查询</button>

【后端】AjaxController控制器Details方法

public ActionResult Details(int id)
        {
            if (dbContext.StudentSet.Find(id) == null)
            {
                return Content("Fail");
            }
            else
            {
                return Content("Success");
            }
        }

【结果】我的数据库中没有id为1的数据，有id为6的数据

结果.gif

JSON基础

简介 JSON： JavaScript对象表示法（JavaScript Object Notation） JSON是存储和交换文本信息的语法，类似XML，它采用键值对的方式来组织，易于阅读和编写，同时也易于机器解析和生成* JSON是独立于语言的，也就是说不管什么语言，都可以解析Json，只需要按照json的规则来就行

JSON与XML比较

  • Json的长度和XML格式比起来很短小（减少带宽）
  • Json读写的速度更快
  • Json可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便

JSON语法规则

  • JSON数据的书写格式是：名称/值对 
    名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如，"name":"郭靖"
  • JSON的值可以是下面这些类型：
  • 数字(整型或浮点数)，比如123,1.23
  • 字符串（在双引号中）
  • 逻辑值（true，false）
  • 数组（写在方括号中）
  • 对象（写在花括号中）
  • null

    例如：

    {
 "staff":[
 {"name":"宏碁","age":70},
{"name":"郭靖","age":35},
{"name":"黄蓉","age":30}
]
}
{
 "nane": "los",
 "success": "True",
 "message": "请求成功",
 "info": [{
     "name": "laosiji",
     "age": "100",
     "asdas": "121",
     "hobby": ["daqiu", "youyong"],
     "aa": [{
         "anme": "aa",
         "age": 20
     }, {
         "aa": "asdas",
         "age": 5565
     }]
 }]
}
`

    JSON解析

    方式一：

    var jsondata=‘{"staff":[{"name":"黄蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}‘;
var jsonobj=eval(‘(‘+jsondata+‘)‘);    //如果在json数据中存在js脚本的话会直接执行。（危险）
alert(jsonobj.staff[0].name);

    方式二

    var jsondata=‘{"staff":[{"name":"黄蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}‘;
var jsonobj=JSON.parse(jsondata);    //如果在json数据中存在js脚本的话会报错(常用，安全，方便)。
alert(jsonobj.staff[0].name);

    在线JSON格式化和校验工具jsonlint

用jQuery实现Ajax

  • jQuery.ajax({[settings]}) $.ajax([{settings]})
  • type：Method类型，"POST"或者“GET”，默认为“GET”
  • url：发送请求的地址
  • data：一个对象，连同请求发送到服务器的数据
  • dataType：预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”
  • success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功的字符串
  • error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象
    例如 
    GET

    $.ajax({格式设置，注意success和error返回的数据是不同的})

    POST

数据以JSOn格式写在data中

跨域

跨域的概念

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或c.a.com域名下的对象。

Paste_Image.png

处理跨域的方法一：代理

后端 处理跨域的方法一：代理

处理跨域方法二：JSONP

前端 处理跨域方法二：JSONP

处理跨域方法三：XHR2

时间： 2024-10-05 14:31:36

jQuery Ajax 学习（转）的相关文章

Jquery ajax 学习笔记

本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $.post 和 $.ajax的区别 之前看过同事写过$.post,而我一直用$.ajax,后来才知道$.get()和$.post()都是通过get和post方式来进行异步,$.ajax()说是jquery最底层的ajax实现的,这里我们使用$.ajax的方式实现. 调用无参方法 1 2 3 4 5 6 7 8

Javascript,jQuery,ajax学习笔记。持续更新中。[荐]

欢迎大家关注我的博客,我的博客是在平常学习看书中和总结而撰写的,欢迎大家和我交流,不足之处还很多,希望大家和我交流. 一:javascript基础系列(已完结) 二:javascript基础系列之DOM(已完结) 三:jQuery系列文章(未完结) 四:AJAX(未完结) 五:JavaScript权威指南第6版中文版   一:javascript基础系列: Javascript基础系列之(一)JavaScript语法 Javascript基础系列之(二)变量 Javascript基础系列之(三)

jQuery ajax学习笔记

一$.ajax的一般用法 $.ajax({ url:url,                                必须有的,它规定把请求发送到哪个控制器里的方法 type:'POST',                        可选择的,默认是Get data:data,                          可选择的,发送到服务器的数据.将自动转换为请求字符串格式 success:function(),              可选择的,请求成功时服务器返回的数据

前端学习——JQuery Ajax使用经验

0.前言 在项目推进过程中经常使用Ajax,通过Jquery提供的函数可以非常方便的使用Ajax,但是在实际使用中也遇到一些问题,例如如何防止浏览器使用缓存,如何使用同步方式等.通过博文整理总结希望自身有所提高. 在这里通过一个加法例子说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单. [前端]--add.html 图1 add页面 [后端]--add.php <?php // 返回JSON格式 header('Content-Type:application/json;char

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等（二）

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

Jquery+Ajax+php学习笔记

昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件 要用jQuery必须做此步<script type="text/javascript">$(docum

jQuery学习之jQuery Ajax用法详解

[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQue jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起,处理复杂的ajax请求时,jQuer

jQuery学习之jQuery Ajax用法详解（转）

[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQue jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起,处理复杂的ajax请求时,jQuer

jquery～ajax()学习

w3school-jquery.ajax()文档:http://www.w3school.com.cn/jquery/ajax_ajax.asp JQuery.ajax(),阿贾克斯,方法通过http请求加载远程数据,它可以在不重新加载整个网页的情况下,对网页的某部分进行更新. $ajax()返回其创建的XMLHttpRequest对象,即发送请求.调用api.XMLHttpRequest是ajax的基础,用于在后台和服务器交换数据. $.ajax({ //famous阿贾克斯, jquery.