一.什么是Ajax?

Asynchronous JavaScript and XML(异步JavaScript和XML)

二.实现步骤

3.Open方法

  三个参数的含义

  1、提交方式 Form-method

  2、提交地址 Form-action

  3、是否异步

    true异步:非阻塞模式 前面的代码不会影响后面代码的执行

    false同步:阻塞模式 前面的代码会影响后面代码的执行.比如:定时器,

    异步和同步的区别?什么时候用同步什么时候用异步?

     当后续的代码需要用到前面的东西的时候,需要用同步,不过同步用的少,因为完全可以通过事件回调处理,一般情况用异步.

4.等待服务器返回内容,请求状态监控

onreadystatechange事件:on ready ststechange
属性:
  1.readyState:
ajax工作状态.
    0   (初始化)还没有调用open()方法
    1 (载入)已调用send()方法,正在发送请求
    2 (载入完成)send()方法完成,已收到全部响应内容
    3 (解析)正在解析响应内容
    4 (完成)响应内容解析完成,可以在客户端调用了   2.responseText:ajax请求返回的内容就会被存放在这个属性中,不管传的是什么值,通过它得到的都是字符串.
    
3.如果请求一个不存在的页面就会弹出异常,所以需要有一个容错处理.利用服务器状态码:status

    

三.好处

节省用户操作,时间,提高用户体验,减少数据请求,传输获取数据.

四.什么是表单

向服务器提交数据,比如:提交用户信息

action:提交到哪里;

method:提交方式:Get和Post

  Get和Post区别:

  get:把数据和值用"="号连接,如果有多个的话,那么他会把多个数据组合,用&&符号进行连接,然后把数据放到url?后面传到指定页面.提交到了后端,后端会相应的获取我们传递过去的值:因为会缓存,所以提交的内容会放在地址栏上,或者下拉列表也会有显示因为url长度限制的原因,我们不要通过get方式传递过多的数据.

  1.传输方式的区别:Get通过url地址传输,Post通过浏览器内部传输

  2.传输数据量:Get有数据量限制,每个浏览器都不同 Post理论上无限.get传的值是字符串类型,不能传递任何其他的类型,post可以传很多,比如文本类型,甚至二进制类型.

五.后端数据的接收

$_GET - 通过URL传递给该脚本的变量的数组

$_POST - 通过HTTP POST方法(表单)传递给该脚本的变量的数组.

      前后台键名和传输方式必须一致

      数据传输方式

      数据获取方式

ajax-1:基本实现原理的更多相关文章

  1. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  2. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  3. ajax ----进度条的原理

    一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...

  4. Ajax实例OR技术原理 转自 (http://blog.csdn.net/evankaka )

    摘要:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的 ...

  5. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  6. Ajax基本概念和原理

    什么是Ajax Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+X ...

  7. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  8. Ajax实现步骤和原理

    1.获取ajax异步对象     IE4~IE12 : 使用new ActiveXObject("microsoft.xmlhttp");     非IE : 使用new XMLH ...

  9. AJAX最简单的原理以及应用

    Ajax是创建快速动态网页的技术,通过后台与服务器少量的数据交互,是网页实现异步更新.也就是在不整个刷新页面的情况下,可以更新网页中的局部区域. 在原始web应用的模式中: 浏览器       以 h ...

  10. [妙味Ajax]第一课:原理和封装

    知识点总结: ajax是异步的javascrip和xml,用异步的形式去操作xml 访问的是服务端,即https://127.0.0.1/ 或者 https://localhost 1.创建一个aja ...

随机推荐

  1. socket(一)

    相关链接: http://my.oschina.net/u/1378445/blog/340206?p=2&temp=1469158886336#blog-comments-list http ...

  2. PHP操作MySQL的常用函数

    某些情况下(如html中),调用php的变量时,要给变量加{},若要使字符串变量加上引号,则还需要在{}外加引号 如: $sql="select * from admin where use ...

  3. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

  4. Centos系统下Lamp环境的快速搭建(超详细,转)

    lamp的搭建对于初学者是一件很头疼的事情,所以借此机会把自己当初快速搭建linux+apche+mysql+php的方法分享大家希望能到你. 工具/原料 虚拟机及Centos操作系统 Linux基本 ...

  5. Integer

    import static java.lang.System.*; public class IntegerTestOne{ public static void main(String []args ...

  6. Keycode对照表

    字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 ...

  7. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  8. js 原生对象排序

    //对象属性排序 function compare(propertyName) { return function (object1, object2) { var value1 = object1[ ...

  9. 51nod 1264 线段相交(几何)

    题目链接:51nod 1264 线段相交 如果两条线段相交,则需满足一条线段的一个端点在另一条线段上,或者 两条线段都分别跨越另一条线段延伸的直线上.(如果点p1位于直线p3p4的一边,而点p2位于该 ...

  10. Octopus系列之模板快速开发手册

    公共代码 html_header_1 <title>${sitename}-${seotitle}</title> <meta http-equiv="Cont ...