Ajax基础知识

Ajax名称

Asynchronous Javascript And XML 翻译为: 异步JS数据交互模块;

作用

实现前后端或跨页面间的异步数据通信;

同源策略限制

Ajax默认只能在同一个网站中使用,不能跨域, 最好在网站环境(服务器环境)下测试。

Ajax核心对象属性方法(重点)

XMLHttpRequest 是Ajax的核心对象,是浏览器内建的对象,特点如下:

1)在不重新加载页面的情况下更新网页

2)在页面已加载后从服务器请求数据

3)在页面已加载后从服务器接收数据

4)在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

 XMLHttpRequest 拥有5个属性

1)readyState

2)status

3)responseText

4)responseXML

5)statusText

1个事件:

onreadystatechange 

7个方法:

1)open(method, url [, async = true [, username = null [, password = null]]])

2)send(body)

3)setRequestHeader(name, value)(注:请求头,post请求下必须使用,get请求不需要)

4)abort()

5)getAllResponseHeaders()

6)getResponseHeader()

7)setRequestHeader()

2种请求方式:

GET/POST

语法格式:

 1 //最简单的get请求
 2
 3 var xhr = new XMLHttpRequest(); //0
 4 xhr.onreadystatechange = stateFn; //3,4
 5 xhr.open("get", "a.txt");  //1
 6  xhr.send(null);       //2
 7
 8  function stateFn() {
 9      if(xhr.readyState == 4&&xhr.status == 200) {
10          h1.innerHTML = xhr.responseText;
11      }
12  }

语法解释:

1)open()方法,初始化 HTTP 请求参数,并不发送请求。
语法格式:xhr.open(method, url [, async = true [, username = null [, password = null]]]) 
功能:
=> method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。
=> url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
=> async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。
代码示例:xhr.open("get","xmlhttprequest.php",false);

2)send()方法,发送open()准备好的请求
语法格式:xhr.send([data = null])  
 功能:设置请求主体,如果请求方法为GET或HEAD主体只能是空的NULL,其他值没有意义。
 代码示例:xhr.send(null);

3)GET请求方式
GET请求是Ajax应用中最常见请求类型,通过向服务器端发送查询,并接收服务器端处理后的数据。
 查询字符串一般直接添加到请求的地址末尾,这个添加的请求字符如果是非字母和数字一般都需要经过编码处理才行。
 这个编码一般由函数 encodeURIComponent()方法完成。

时间: 2024-10-12 22:59:55

Ajax基础知识的相关文章

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

AJAX 基础知识

AJAX 基础知识 一.AJAX综述 1.AJAX的概念 A:异步asynchronousJ:JavaScriptA:andX:XML 异步的JavaScript和XML. 2.AJAX的优点(好处) 1),提高用户体验度  2),JS与服务端的交互  3),页面局部刷新--提高浏览器的效率 2.AJAX的缺点(弊端)    加大服务器的负担 注:新思想,老技术. 二.实现AJAX功能 (一).JS实现AJAX功能 1.获得XMLHttpRequest(浏览器的兼容) (二).JQuery实现A

Ajax基础知识 浅析(含php基础语法知识)

1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo "<div>Hello World!</div>"; ?> (2) $  变量声明  如果只声明不赋值,会报错 <?php $num=123; echo $num; echo "<div>编号为:".$num."&l

11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回值,页面都是ajax处理的. ajax的写法: test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

Ajax基础知识分享

整理的一点有关ajax的知识,给大家分享下! 说到ajax首先我们先要了解一下关于ajax的原理和XmlHttpRequest对象:Ajax的原理简单来说通过XmlHttpRequest对象来向服务器获得数据,然后用javascript来操作DOM而更新页面,这其中最关键的一步就是从服务器获得请求数据.要清楚这个过程和原理. XMLHttpRequest用于后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网站部分进行更新,当请求被发送到服务器时,每当readyState改变时,

Ajax基础知识一。

了解Ajax对他的的基本内容进行一个悠闲的了解. 之前一直对Ajax不了解,在大学中也没有好好地学习一番,一直没有运用到实践中.现在学习基本的知识,填补一下那片海中的Ajax概念. 以下为整理总结的内容. 1.Ajax向服务器发送请求: 使用XMLHttpRequest 对象的open()和send()方法: open(method,url,async),method:表示请求的类型有GET和POST url:文件在服务器上的位置.async:true(异步)或者false(同步) send(S

js学习总结----http报文及ajax基础知识

HTTP报文 客户端传递给服务器的内容 和 服务器传递给客户端的内容 都属于HTTP报文 起始行:请求起始行  响应起始行 首部:请求首部 响应首部 通用首部(请求和响应都有的) 自定义首部 主体:请求主体  响应主体 客户端传递给服务器端数据: 请求URL后面问号传参的方式传递给服务器  /getList?name=zhangsan&age=7 设置请求的首部(设置请求头信息) 设置请求主体,把传递给服务器的内容放在请求主体中传递给服务器 服务器端传递给客户端数据: 设置响应头信息 设置响应主

web基础知识(一)关于ajax传值最基础东西

HTTP方法之 GET对比POST GET:从指定的资源请求数据, POST:向指定的资源提交要被处理的数据 GET方法: 请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的: /test/demo_form.asp?name1=value1&name2=value2 有关 GET 请求的其他一些注释: GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回

web基础知识(二)关于ajax,Jquery传值最基础东西

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人 列表很多,点击编辑和删除无刷新的进行操作的话,肯定是ajax了,因为无刷新嘛,可能有的朋友会说直接传值,传ID到Action删除不就OK了,用得着写js么,纯粹自己找麻烦嘛. 其实这里重点是无刷新的啦, 这个上传后到这里来,有个预览功能,把本次的全部预览,如果全部刷新的话,那么刚才上传的就不会在这个页面了,so,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选