AJAX实例

冷兔ex发布
183 阅读5分钟

jQuery AJAX

  • jQuery AJAX本质 XMLHttpRequest 或 ActiveXObject
  • jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON
  • 能够把这些外部数据直接载入网页的被选元素中
  • 如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同

AJAX实例

AJAX加载CSS

以前我们用<link rel=stylesheet href="1.css"/>创建路由，路由就是if...else语句

1. 先在html标签里加一个button：

<!DOCTYPE html>
    <html>
    <head><title>ajax</title>
  
    </head>
    <body><h1>AJAX demo3</h1>
    <p>
        <button id="getCSS">请求 CSS</button>
    </p>
    <script src="/main.js"></script>
    </body>
    </html>

2. 创建HttpRequest对象

const request = new XMLHttpRequest()

3. 调用对象的open方法

request.open('GET','/style.css');  //获取资源用GET

4. 监听对象的成功和失败事件

request.onload = ()=>{
  console.log('成功');
};
request.onerror = ()=>{
  console.log('失败');
};

5. 调用对象的send方法(发送请求)

request.send();

6. 加一个button

<!DOCTYPE html>
    <html>
    <head><title>ajax</title>
  
    </head>
    <body><h1>AJAX demo3</h1>
    <p>
        <button id="getCSS">请求 CSS</button>
    </p>
    <script src="/main.js"></script>
    </body>
    </html>

7. getCSS.onclick事件

getCSS.onclick =()=>{
const request =new XMLHttpRequest();
request.open('GET','/style.css');
request.onload = ()=>{
  console.log('成功');
};
request.onerror = ()=>{
  console.log('失败');
}; 
  request.send()
};

8. 写一个请求的响应内容：

console.log('我是main.js5')
getCSS.onclick =()=>{
const request =new XMLHttpRequest();
request.open('GET','/style.css');
request.onload = ()=>{
  console.log('request.response')
  console.log(request.response)
    
  const style =document.createElement('style') //创建 style 标签
    
  style.innerHTML = request.response  //填写 style 内容
    
  document.head.appendChild(style)  //插到头里面
};
request.onerror = ()=>{
  console.log('失败');
}; 
  request.send()
};

AJAX加载JS

以前我们用<script src="2.js"></script>,用node.js做路由：

  if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    const string =fs.readFileSync('public/index.html') //把文件变成字符串
    response.write(string)
    response.end()
  } else if(path === '/main.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    
    response.write(fs.readFileSync('public/main.js'))
    response.end()
  } else if(path === '/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(fs.readFileSync('public/style.css'))
    response.end()
  } else if(path === '/2.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/2.js'))
    response.end()
  • 还可以用AJAX加载JS：
<!DOCTYPE html>
    <html>
    <head><title>ajax</title>
  
    </head>
    <body><h1>AJAX demo3</h1>
    <p>
        <button id="getCSS">请求 CSS</button>
        <button id="getJS">请求</button>
    </p>
    <script src="/main.js"></script>
    </body>
    </html>

getJS.onclick =()=>{
    const request =new XMLHttpRequest();
    request.open('GET','/2.js');
    request.onload = ()=>{
    
        const script = document.createElement('script')
        script.innerHTML = request.response
        document.body.appendChild(script)
    }
    request.onerror = ()=>{}
    request.send()
    }

AJAX加载HTML

<!DOCTYPE html>
    <html>
    <head><title>ajax</title>
  
    </head>
    <body><h1>AJAX demo3</h1>
    <p>
        <button id="getCSS">请求 CSS</button>
        <button id="getJS">请求JS</button>
        <button id="getHTML">请求HTML</button>
    </p>
    <script src="/main.js"></script>
    </body>
    </html>
  • 建立路由
if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    const string =fs.readFileSync('public/index.html') //把文件变成字符串
    response.write(string)
    response.end()
  } else if(path === '/main.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    
    response.write(fs.readFileSync('public/main.js'))
    response.end()
  } else if(path === '/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(fs.readFileSync('public/style.css'))
    response.end()
  } else if(path === '/2.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/2.js'))
    response.end()
  } else if(path === '/3.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/3.html'))
    response.end()

getHTML.onclick = ()=>{
    const request = new XMLHttpRequest()
    request.open('GET','/3.html')
    request.onload = ()=>{
        console.log(request.response);
        const div =document.createElement('div')
        div.innerHTML = request.response
        
        document.body.appendChild(div)
    };
    request.onerror = ()=>{}
    request.send()
}
  • 如果以上的加载，出现路径填写错误的情况，就会产生一个矛盾的现象，建路由的时候，代码为：
...
else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你输入的路径不存在对应的内`)
    response.end()

也就是不能触发rquest.onerror = ()=>{}，所以说，需要定义一个比request.onload和rquest.onerror，更准确的词，即为nreadystatechange，下面继续优化main.js内容：

getCSS.onclick =()=>{
const request =new XMLHttpRequest();
request.open('GET','/style.css');
request.onreadystatechange = ()=>{
    //下载完成，但不知道是成功2xx  还是失败 4xx 5xx
    if(request.readyState===4){
      if (request.status>= 200 && request.status < 300){
        const style = document.createElement("style"); //创建 style 标签
        style.innerHTML = request.response;           //填写 style 内容
        document.head.appendChild(style);             // 插到头里面
      }else{
        alert('加载 css 失败')
      }
    }

};
  request.send()
};

AJAX加载xml

if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    const string =fs.readFileSync('public/index.html') //把文件变成字符串
    response.write(string)
    response.end()
}else if(path === '/4.xml'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
    response.write(fs.readFileSync('public/4.xml'))
    response.end()

<button id="getXML">请求 XML</button>

<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
         Hello World
    </warning>
</message>

getXML.onclick = ()=>{
    const request = new XMLHttpRequest()
    request.open('GET','/4.xml')
    request.onreadystatechange = ()=>{
        if(request.readyState ===4 && request.status ===200){
            const dom = (request.responseXML);
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log((text).trim())  //去掉文本的多余空格
        }
    };
    request.send()
}

总结

http是个筐，什么都能往里装

  • 可以装HTML、CSS、JS、XML
  • 需设置正确的Content-Type
  • 只要知道怎么解析这些内容，就可以使用这些内容

解析方法

  • 得到css之后生成style标签
  • 得到JS之后生成script标签
  • 得到HTML之后使用innerHTML和DOM API
  • 得到XML之后使用respinseXML和DOM API
  • 不同类型的数据有不同类型的解析办法

加载JSON

(JavaScript Object Notation) JS对象标记语言(道格拉斯)

  • Notation,标记
  • JSON是一门标记语言(比如：HTML、XML、Markdown;给数据展示性标记或逻辑性标记)，JSON不是JS对象，抄袭JS语言
  • JSON的语法是铁轨图，举例{"name": "frank" ; "age" : 18} 支持6种数据类型：string(只支持双引号)、 number、 bool、 null(没有undefined)、 object、 array ，不支持函数，不支持变量(不支持引用)

8.1 先建路由服务器：

  console.log('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)

  if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    const string =fs.readFileSync('public/index.html') //把文件变成字符串
    response.write(string)
    response.end()
  } else if(path === '/main.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    
    response.write(fs.readFileSync('public/main.js'))
    response.end()
  } else if(path === '/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(fs.readFileSync('public/style.css'))
    response.end()
  } else if(path === '/2.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/2.js'))
    response.end()
  } else if(path === '/3.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/3.html'))
    response.end()
  } else if(path === '/4.xml'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
    response.write(fs.readFileSync('public/4.xml'))
    response.end()
  } else if(path === '/5.json'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(fs.readFileSync('public/5.json'))
    response.end()

8.2 创建5.json文件：

{
    "name":"frank",
    "age": 18,
    "xxx": null
}

8.3 请求json

<!DOCTYPE html>
    <html>
    <head><title>ajax</title>
  
    </head>
    <body><h1>AJAX demo3</h1>
    <p>
        <button id="getCSS">请求 CSS</button>
        <button id="getJS">请求JS</button>
        <button id="getHTML">请求 HTML</button>
        <button id="getXML">请求 XML</button>
        <button id="getJON">请求 JSON</button>
    </p>
    <script src="/main.js"></script>
    </body>
    </html>

8.4 写main.js代码；

getJSON.onclick = ()=>{
    const request = new XMLHttpRequest()
    request.open('GET','/5.json')
    request.onreadystatechange = ()=>{
        if(request.readyState ===4 && request.status ===200){
            const object = JSON.parse(request.response) //把符合JSON的语法的字符串变成对应的对象或其他
            console.log(object)
        }
    };
    request.send()
}

8.5 实现把JSON代替XML，作为数据请求，用JSON.parse得到这个数据，再对数据进行处理，比如显示在页面上：

getJSON.onclick = ()=>{
    const request = new XMLHttpRequest()
    request.open('GET','/5.json')
    request.onreadystatechange = ()=>{
        if(request.readyState ===4 && request.status ===200){
            const object = JSON.parse(request.response) //把符合JSON的语法的字符串变成对应的对象或其他JS对应类型的数据(6种)
            console.log(object)
            myName.textContent = object.name 

        }
    };
    request.send()
}

以上的JSON.parse，也可以把JSON字符串true变成JS布尔true，代码如下：

getJSON.onclick = ()=>{
    const request = new XMLHttpRequest()
    request.open('GET','/5.json')
    request.onreadystatechange = ()=>{
        if(request.readyState ===4 && request.status ===200){
            console.log(typeof request.response)
            console.log(request.response)
            const object = JSON.parse(request.response) //把符合JSON的语法的字符串变成对应的对象或其他
            console.log(typeof object)
            console.log(object)
            

        }
    };
    request.send()
}

以上的JSON.parse，如果不符合JSON语法，则直接抛出一个Er，可以用try catch捕获错误，举例如下：

let object
try{
    object = JSON.parse('{'name':'frank'}')
} catch(error){
    console.log('出错了，错误详情是')
    console.log(error)
    object = {'name':'no name'}
}
console.log(object)

还可以把JS数据转换为JSON字符串，用JSON.stringify，举例：

const obj = {"hi":'Ho'}
JSON.stringify(obj)
"{"hi":"Ho"}"

以上的实现方式，也是很多网站，输入账号后，显示用户信息，一种就是用HTML写的，还有一种就是AJAX请求来再写上去的。

加载页面

9.1 创建数据库文件夹db

9.2 创建page1,2,3 填写内容

[
   {"id":1},
   {"id":2},
   {"id":3},
   {"id":4},
   {"id":5},
   {"id":6},
   {"id":7},
   {"id":8},
   {"id":9},
   {"id":10}
]

9.3 加index引用

<!DOCTYPE html>
    <html>
    <head><title>ajax</title>
  
    </head>
    <body><h1>AJAX hello <span id="myName"></span></h1>
    <p>
        <button id="getCSS">请求 CSS</button>
        <button id="getJS">请求JS</button>
        <button id="getHTML">请求 HTML</button>
        <button id="getXML">请求 XML</button>
        <button id="getJSON">请求 JSON</button>
    </p>
    <div>
        {{page1}}
    </div>
    <script src="/main.js"></script>
    </body>
    </html>
avatar
文章
阅读
粉丝