Ajax基础知识一。

了解Ajax对他的的基本内容进行一个悠闲的了解。

之前一直对Ajax不了解,在大学中也没有好好地学习一番,一直没有运用到实践中。现在学习基本的知识,填补一下那片海中的Ajax概念。

以下为整理总结的内容。

1.Ajax向服务器发送请求:
使用XMLHttpRequest 对象的open()和send()方法;
open(method,url,async),method:表示请求的类型有GET和POST

url:文件在服务器上的位置。async:true(异步)或者false(同步)

send(String):将请求发送到服务器,string仅用于POST请求
2.Ajax创建对象XMLHTTPRequest
var xmlhttp;
if(windows.XMLHttpRequest){
//适应浏览器:IE7+,firefox,chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXobject("Microsoft.xmlHTTP");
//适应浏览器IE6,IE5
}
3.Ajax获取服务器响应
responseText:获得字符串形式的响应数据

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Ajax创建的对象xmlhttp获取的是字符型数据responseText;
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);//获取数据异步
xmlhttp.send();//将s上述open的get请求,文件位置,异步发送到服务器。
}

responseXML,获取XMl形式的响应数据:
4.AJAX - onreadystatechange事件
XMLHttpRequest对象具有的三个重要属性:
onreadystatechange:存储函数,每当readyState属相变化时候,就会调用带函数
readyState:描述XMLHttprequest的状态0:请求初始化,1:服务器建立连接,2:请求以接收,3:请求处理中,4:请求已完成,且响应已就绪
status:200 表示ok,

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status == 200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;//获取id = ‘myDiv’的dom,发送responseText的请求类型
}
}

当存在多个Ajax任务时候买简历标准函数来调用它。

var xmlhttp;//首先定义Ajax对象。
// 这里是ajaxde 数据请求响应函数
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();//发送请求
}
//简历标砖函数,调用Ajax请求,点击“myFunction”
function Myfunction(){
loadXMLDOC(“/ajax/test.txt”,function(){ //调用Ajax请求,包含数据文件位置和所需要处理的任务
//设置Ajax请求状态
if(xmlhttp.readyState ==4 && xmlhttp == 200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//说明是myDiv的DOM发送的Ajax字符请求
}
}
)

}

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

原文地址:https://www.cnblogs.com/gdp176119/p/9406806.html

时间: 2024-10-10 20:36:34

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名称 Asynchronous Javascript And XML 翻译为: 异步JS数据交互模块: 作用 实现前后端或跨页面间的异步数据通信: 同源策略限制 Ajax默认只能在同一个网站中使用,不能跨域, 最好在网站环境(服务器环境)下测试. Ajax核心对象属性方法(重点) XMLHttpRequest 是Ajax的核心对象,是浏览器内建的对象,特点如下: 1)在不重新加载页面的情况下更新网页 2)在页面已加载后从服务器请求数据 3)在页面已加载后从服务器接收数据 4)在后台向服务

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,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选