ajax简介

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

Ajax包括:

 "color: #ff0000">ajax伪造

 iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。

因此,iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>伪造AJAX</title>
  </head>
  <body>
    <div>
      <p>请输入要加载的地址:<span id="currentTime"></span></p>
      <p>
        <input id="url" type="text" />
        <input type="button" value="提交" onclick="LoadPage();">
      </p>
    </div>
    <div>
      <h3>加载页面位置:</h3>
      <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
    </div>
    <script type="text/javascript">
      window.onload= function(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
      };
      function LoadPage(){
        var targetUrl = document.getElementById('url').value;
        document.getElementById("iframePosition").src = targetUrl;
      }
    </script>
  </body>
</html>

原理是这样的,设置一个提交按钮,再设置一个输入框,当我们输入一个网址的时候,在当前的页面加载输入网址的页面信息,呈现在iframe框里,这样就能做到不刷新URL来提交不同的信息。

原生ajax

 Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

一、XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

XHR的主要方法有: 

1. void open(String method,String url,Boolen async)  
 用于创建请求  
  参数:
    method: 请求方式(字符串类型),如:POST、GET、DELETE...
    url:  要请求的地址(字符串类型)
    async: 是否异步(布尔类型)
2. void send(String body)
  用于发送请求
  参数:
    body: 要发送的数据(字符串类型)
3. void setRequestHeader(String header,String value)
  用于设置请求头
  参数:
    header: 请求头的key(字符串类型)
    vlaue: 请求头的value(字符串类型)
4. String getAllResponseHeaders()
  获取所有响应头
  返回值:
    响应头数据(字符串类型)
5. String getResponseHeader(String header)
  获取响应头中指定header的值
  参数:
    header: 响应头的key(字符串类型)
  返回值:
    响应头中指定的header对应的值
6. void abort() 

终止请求

XHR的主要属性有:

1. Number readyState
  状态值(整数),可以确定请求/响应过程的当前活动阶段 "htmlcode">
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h1>XMLHttpRequest - Ajax请求</h1>
  <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
  <script src="/UploadFiles/2021-04-02/jquery-1.12.4.js">

三、post请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据,而且格式不限。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>POST</title>
</head>
<body>
  <h1>XMLHttpRequest - Ajax请求</h1>
  <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />
  <script src="/UploadFiles/2021-04-02/jquery-1.12.4.js">

jquery ajax

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

 "htmlcode">

1. jQuery.get(...)
    所有参数:
       url: 待载入页面的URL地址
       data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。
     dataType: 返回内容格式,xml, json, script, text, html
2.jQuery.post(...)
    所有参数:
       url: 待载入页面的URL地址
       data: 待发送 Key/value 参数
     success: 载入成功时回调函数
     dataType: 返回内容格式,xml, json, script, text, html
3.jQuery.getJSON(...)
    所有参数:
       url: 待载入页面的URL地址
       data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。
4.jQuery.getScript(...)
    所有参数:
       url: 待载入页面的URL地址
       data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。
5.jQuery.ajax(...)
    部分参数:
       url:请求地址
       type:请求方式,GET、POST(1.9.0之后用method)
     headers:请求头
       data:要发送的数据
   contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
      async:是否异步
     timeout:设置请求超时时间(毫秒)
    beforeSend:发送请求前执行的函数(全局)
     complete:完成之后执行的回调函数(全局)
     success:成功之后执行的回调函数(全局)
      error:失败之后执行的回调函数(全局)
     accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
     dataType:将服务器端返回的数据转换成指定类型
      "xml": 将服务器端返回的内容转换成xml格式
      "text": 将服务器端返回的内容转换成普通文本格式
      "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
     "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
      "json": 将服务器端返回的内容转换成相应的JavaScript对象
     "jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl" jQuery 将自动替换 "htmlcode">
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p>
    <input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
  </p>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">

跨域ajax

由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的,通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

浏览器同源策略并不是对所有的请求均制约:

 "htmlcode">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <input type="button" value="Ajax" onclick="DoAjax();"/>
  <input type="button" value="JsonpAjax" onclick="JsonpAjax();"/>
  <script src="/UploadFiles/2021-04-02/jquery-1.12.4.js">

aylin.com域名这边可以给定义函数

# 采用pythontornado框架来进行的
class IndexHandler(tornado.web.RequestHandler):
  def get(self):
    self.write('func([11,22,33]);')
  def post(self, *args, **kwargs):
    self.write('t2.post')

在这里jsonp就采用script标签的src来进行跨域请求的

二、CORS

上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输,那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候,对方已经收到,但是在返回的时候被浏览器给阻挡,我们可以写一串类似于身份证的字符串,通过浏览器的预检,从而达到数据的传输。

这方面分为简单请求和非简单请求

条件:
  1、请求方式:HEAD、GET、POST
  2、请求头信息:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type 对应的值是以下三个中的任意一个
                application/x-www-form-urlencoded
                multipart/form-data
                text/plain
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

简单请求只一次请求,而复杂请求是两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

基于cors实现AJAX请求:

1、支持跨域,简单请求

服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p>
    <input type="submit" onclick="XmlSendRequest();" />
  </p>
  <p>
    <input type="submit" onclick="JqSendRequest();" />
  </p>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


class MainHandler(tornado.web.RequestHandler):
  def get(self):
    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    self.write('{"status": true, "data": "seven"}')

2、支持跨域,复杂请求

由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

 "htmlcode">

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p>
    <input type="submit" onclick="XmlSendRequest();" />
  </p>
  <p>
    <input type="submit" onclick="JqSendRequest();" />
  </p>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


class MainHandler(tornado.web.RequestHandler):
  def put(self):
    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    self.write('{"status": true, "data": "seven"}')
  def options(self, *args, **kwargs):
    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    self.set_header('Access-Control-Allow-Headers', "k1,k2")
    self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
    self.set_header('Access-Control-Max-Age', 10)

3、跨域传输cookie

在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送:

 "htmlcode">

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p>
    <input type="submit" onclick="XmlSendRequest();" />
  </p>
  <p>
    <input type="submit" onclick="JqSendRequest();" />
  </p>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


class MainHandler(tornado.web.RequestHandler):
  def put(self):
    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    self.set_header('Access-Control-Allow-Credentials', "true")
    self.set_header('xxoo', "seven")
    self.set_header('zhangyanlinhenshuai', "feichangshuai")
    self.set_header('Access-Control-Expose-Headers', "shuai,shuaishuai")
    self.set_cookie('kkkkk', 'vvvvv');
    self.write('{"status": true, "data": "seven"}')
  def options(self, *args, **kwargs):
    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    self.set_header('Access-Control-Allow-Headers', "k1,k2")
    self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
    self.set_header('Access-Control-Max-Age', 10)

以上所述是小编给大家介绍的Ajax学习全套(最全最经典)的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。