web开发笔记一ajax的使用(1)

简介

今天介绍一下ajax的使用.


内容

  • AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

  • 使用ajax获取.txt文件
-html:

ajax获取的内容:

-js: 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; console.log(xmlhttp.responseText); } } //设置请求格式 xmlhttp.open("GET", "./text.txt", true); //发送请求 xmlhttp.send();
web开发笔记一ajax的使用(1)_第1张图片
txt.png
  • 使用ajax解析json
      -js:
            var xhr;
            if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.onreadystatechange = function() {

                if(xhr.readyState == 4 && xhr.status == 200) {
                    var response = xhr.responseText;

                    var json = JSON.parse(response);
                    var data = json["data"];
                    for(var i = 0; i < data.length; i++) {
                        var book = data[i];
                        console.log("书名:" + book["name"] + "\n" + "类别:" + book['category'] + "\n" + "介绍:" + book["desc"]);
                    }

                }
            }

            xhr.open("GET", './data.json', true);
            xhr.send();
web开发笔记一ajax的使用(1)_第2张图片
json.png
  • ajax 解析xml数据
  -js:
            var xmlhttp ;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{                
                 xmlhttp = new  ActiveXObject("Microsoft.XMLHTTP");
            }
            //回调
            xmlhttp.onreadystatechange=function(){                   
                 if(xmlhttp.readyState==4&&xmlhttp.status==200){
                   var rootEle = xmlhttp.responseXML;                       
                   var catalogEle = rootEle.getElementsByTagName("CATALOG")[0];
                   var cdList = catalogEle.getElementsByTagName("CD");      
                   var table = document.createElement("table");                      
                    table.innerHTML="Artist Title";
                   for(var i =0;i

web开发笔记一ajax的使用(1)_第3张图片
xml.png

结束

这次只介绍ajax常用数据的解析和get请求,下次介绍ajax的提交数据和跨域问题的解决方案.

你可能感兴趣的:(web开发笔记一ajax的使用(1))