开发者社区> futaosmile> 正文

慕课网Ajax学习笔记

简介: 慕课网Ajax全接触 Ajax全称:Asynchronous JavaScript and XML(异步的JavaScript和XML) 特点:在不必刷新整个网页的情况下实现局部更新,带来更好的用户体验。
+关注继续查看

慕课网Ajax全接触

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

概念介绍

  • 运用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
<code>GET</code>:一般用于信息获取
使用URL传递参数(变量会放在URL里边)
对所发送信息的数量也有限制,一般在2000个字符
幂等,执行N次与执行1次效果相同,都不会改变数据库的信息
<code>POST</code>:一般用于修改服务器上的资源
对所发送信息的数量无限制

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

  1. 一个数字和文字组成的状态码,用来告诉客户端请求是成功还是失败
  2. 响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等
  3. 响应体,也就是响应正文,服务器传来的内容

| <b>HTTP状态码分类</b> |
|-|-|
| 分类 | 分类描述 |
| 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取得响应

  • <code>responseText</code>:获取字符串形式的响应数据
    *<code>responseXML</code>:获取XML形式的响应数据
    *<code>status</code>和<code>statusText</code>:以数字和文本形式返回HTTP状态码
  • <code>getAllRespondseHeader()</code>:获取所有的响应报头
  • <code>getResponseHeader()</code>:查询响应中的某个字段的值
  • 监听<code>readyState</code>属性

  • 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的数据


img_463f52d20c145f79870c59e3dc7a6b1d.gif
结果.gif

JSON基础

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

JSON与XML比较

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

JSON语法规则

  • ** JSON数据的书写格式是:名称/值对 **
    名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开,比如,"name":"郭靖"
  • ** JSON的值可以是下面这些类型: **
  1. 数字(整型或浮点数),比如123,1.23
  2. 字符串(在双引号中)
  3. 逻辑值(true,false)
  4. 数组(写在方括号中)
  5. 对象(写在花括号中)
  6. 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


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

    POST

img_1e215435842c0b4f3fa8fbeeb05e6e01.png
数据以JSOn格式写在data中

跨域

img_79aeaf07967d62a84fc34e18279b9ca5.png
跨域的概念

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

img_2569e35b7fe0e091f85498a87f62efa8.png
Paste_Image.png

处理跨域的方法一:代理

img_da17c470f480afc9ea351da6fc2982c0.png
后端 处理跨域的方法一:代理

处理跨域方法二:JSONP

img_19d6b9ec5f7fa6e9dc98f252eb636659.png
前端 处理跨域方法二:JSONP

处理跨域方法三:XHR2

img_594b5c83d6ff44250e52203bb4abcb8d.png
Paste_Image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19791 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29122 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22534 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16424 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20688 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14897 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23577 0
+关注
futaosmile
热爱技术与分享
98
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载