美文网首页
Ajax知识

Ajax知识

作者: benbensheng | 来源:发表于2019-02-03 18:04 被阅读0次

常用代码块

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}

  1. XMLHttpRequest 是 AJAX 的基础。
    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 创建对象
    为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject

var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

  1. AJAX - 向服务器发送请求请求
    XMLHttpRequest 对象用于和服务器交换数据。
    如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

  • open(method,url,async)
    规定请求的类型、URL 以及是否异步处理请求。
    method:请求的类型;GET 或 POST
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)
  • send(string) 将请求发送到服务器。
    string:仅用于 POST 请求
    3.AJAX - 服务器 响应
    如需获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
    responseText 获得字符串形式的响应数据。
    responseXML 获得 XML 形式的响应数据。
    xmlhttp.responseText;
    xmlhttp.responseXML

4.AJAX - onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息

  • onreadystatechange 存储函数(或函数名),
    每当 readyState 属性改变时,就会调用该函数。
  • readyState
    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
  • status
    200: "OK"
    404: 未找到页面

if (xmlhttp.readyState==4 && xmlhttp.status==200)

相关文章

  • zepto源码分析·ajax模块

    准备知识 在看ajax实现的时候,如果对ajax技术知识不是很懂的话,可以参看下ajax基础,以便读分析时不会那么...

  • JavaWeb学习-Ajax-1-Ajax简介

    JavaWeb学习-Ajax-1-Ajax简介 进入到一个新的知识点的学习,这个知识点叫做Ajax,指的是异步的j...

  • ajax知识

    $.ajax使用方法 常用参数:1、url 请求地址2、type 请求方式,默认是'GET',常用的还有'POST...

  • Ajax知识

    1.什么是啊ajax? ajax是指异步的JavaScript和XML,是用于建设快速动态页面的技术。ajax可以...

  • Ajax知识

    常用代码块 function loadXMLDoc(){var xmlhttp;if (window.XMLHtt...

  • AJAX基础及原理

    AJAX基础知识 什么是AJAX?async javascript and xml, 异步的JS和XML XML:...

  • AJAX小知识

    1.如何发请求? 我们知道有几种方式可以发请求,但是都有其局限性,如下: 用 form 可以发请求,但是会刷新页面...

  • AjaX小知识

    人生就是一个不断认识与遗憾的过程,总有一天,你会模糊掉我的印记,而我也将遗忘你的身影,不管那些年之前,我们多么的亲...

  • Ajax知识总结

    流程: 创建ajax引擎对象 声明事件监听:监听ajax对象的属性readystate的值,一...

  • Ajax总结

    本文主要总结整理Ajax的一些常用的基础知识,适合初学者。 一、Ajax简介、优劣势、应用场景以及技术 Ajax简...

网友评论

      本文标题:Ajax知识

      本文链接:https://www.haomeiwen.com/subject/stgysqtx.html