HTML5技术

史上最全ajax全套 - 张岩林

字号+ 作者:H5之家 来源:H5之家 2016-08-06 12:00 我要评论( )

ajax简介 AJAX即AsynchronousJavascriptAndXML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,

ajax简介

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

Ajax包括:

利用AJAX可以做:

ajax伪造

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

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

请输入要加载的地址:加载页面位置: window.onload= function(){ Date(); document.getElementById( myDate.getTime(); }; function LoadPage(){ ).value; document.getElementById( targetUrl; }

原理是这样的,设置一个提交按钮,再设置一个输入框,当我们输入一个网址的时候,在当前的页面加载输入网址的页面信息,呈现在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 状态值(整数),可以确定请求/响应过程的当前活动阶段
2. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数)

3. String responseText 作为响应主体被返回的文本(字符串类型)

4. XmlDocument responseXML 服务器返回的数据(Xml对象)

5. Number states 状态码(整数),如:200、404...

6. String statesText 状态文本(字符串),如:OK、NotFound...

 二、get请求

GET用于向服务器查询某些信息:

XMLHttpRequest - Ajax请求 GetXHR(){ ; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr ); } return xhr; } function XmlGetRequest(){ GetXHR(); (){ ){ xhr.responseText; console.log(data); } }; ); // 发送请求 xhr.send(); }

get

三、post请求

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

POSTXMLHttpRequest - Ajax请求 GetXHR(){ ; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr ); } return xhr; } function XmlPostRequest(){ GetXHR(); (){ ){ xhr.responseText; console.log(data); } }; ); ); ); }

post

jquery ajax

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

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

  • jQuery 不是生产者,而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 
  • 注:2.+版本不再支持IE9以下的浏览器

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜莹

      FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜

      2017-03-08 18:01

    • 史上最“脑残”的“抢火车票”程序(node.js版) - 落花落雨不落叶

      史上最“脑残”的“抢火车票”程序(node.js版) - 落花落雨不落叶

      2017-01-14 12:01

    • form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作 - 怪诞咖啡

      form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】

      2016-12-10 11:00

    • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 - imwtr

      pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 -

      2016-11-14 17:00

    网友点评
    a