脚本宝典收集整理的这篇文章主要介绍了Ajax简单使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
ajax 原生代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tITle>ajax</title> <style> .weather table{ width: 800px; border-collapse: collapse; } .weather table td{ width: 120px; height: 40px; line-height: 40px; border: 1px solid red; text-align: center; } </style> </head> <body> <input type="text" id="city" value="苏州"> <button onclick="get_weather()"> 获取数据 </button> <div class="weather"> <table> <tr> <td>data</td> <td>fengxiang——fengli</td> <td>low——high</td> <td>type</td> </tr> </table> </div> <script> // 原生ajax 获取数据 let city =document.querySelector("#city"); let table = document.querySelector(".weather table"); // 先保存页面原有的样子 let html = table.innerHTML; const get_weather=()=>{ console.LOG(`${city.value}的天气预报`); // 实例化一个ajax对象 let xhr = new XMLHttPRequest() console.log(xhr.readystate) // 0 ajax 实例化 // 设置http请求信息 xhr.open("get",`http://wthrcdn.etouch.cn/weather_mini?city=${city.value}`) // xhr.setRequestHeader() // 设置请求头信息 // 发送http请求 xhr.send() // 请求体 username=123&password=123 console.log(xhr.readyState) // 1 构建完成http请求 并且发送 // 通过ajax的监听事件，监听ajax是否已经获取到服务端返回的数据结果了 xhr.onreadystatechange=()=>{ // 当状态发生变化时，执行该函数 // console.log(xhr.readyState) // 2：http请求已经成功被服务端接受， 3：http请求已经在服务端处理中 4: http请求被服务端处理完成后并返回给客户端ajax if (xhr.readyState===4){ // http请求被服务端处理完成后并返回给客户端ajax if (xhr.status===200){ // 判断http请求是否相应成功 // 接受结果 // console.log(xhr.response) // 得到的数据是文本格式的 还需要转换格式 let data=JSON.parse(xhr.response); // console.log(data.data.forecast); let content=""; for (let item of data.data.forecast){ // console.log(item); content+=` <tr> <td>${item.date}</td> <td>${item.fengxiang}——${item.fengli}</td> <td>${item.low}——${item.high}</td> <td>${item.type}</td> </tr> ` } table.innerHTML=html+content; } } } } </script> </body> </html>
以上是脚本宝典为你收集整理的Ajax简单使用全部内容，希望文章能够帮你解决Ajax简单使用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。