简单免费自建网站,小红书推广价目表,怎样在工商局网站做公示,技术支持 盈岚网站建设Ajax 异步JavaScript和XML 作用 实现 HTML 在不整体刷新的情况下#xff0c;通过后台服务器#xff0c;请求数据并局部更新页面内容 操作流程
Ajax 使用 XMLHttpRequest 通过new 关键字可以创建XMLHttpRequest() 对象。 var req new XMLHttpRequest();方法和属性说明req.…Ajax 异步JavaScript和XML 作用 实现 HTML 在不整体刷新的情况下通过后台服务器请求数据并局部更新页面内容 操作流程
Ajax 使用 XMLHttpRequest 通过new 关键字可以创建XMLHttpRequest() 对象。 var req new XMLHttpRequest();方法和属性说明req.open(method, url, async)method[GET|POST] urlurl async[true(异步默认) | false(同步)]req.send()发送HTTP 请求req.responseText获得字符串形式的响应数据。readyState存有XMLHttpRequest 的状态。 请求发送到后台后状态会从0 到4 发生变化 1服务器连接已建立。 2请求已接收。 3请求处理中。 4请求已完成且响应已就绪。req.onreadystatechange每当readyState 属性改变时就会调用该函数。status状态码 创建 Ajax 对象 var xhr new XMLHttpRequest()onreadystatechange readyState 的值发生变化就会触发该事件 xhr.onreadystatechange function () {// 每次readyState 改变的时候触发该事件
}配置连接信息 Ajax 对象中的 .open 方法用来配置请求信息 xhr.open(GET,aj.php,true);第一个参数是本次的请求方式 get / post / put / …第二个参数是本次请求的 url第三个参数是本次请求是否是异步true (默认)表示异步false 表示同步xhr.open(get,/data.php) 发送请求 xhr.send()Ajax 状态码 readyState readyState 0 : 表示未初始化完成也就是 open 方法还没有执行 readyState 1 : 表示配置信息已经完成也就是执行完 open 之后 readyState 2 : 表示 send 方法已经执行完成 readyState 3 : 表示正在解析响应内容 readyState 4 : 表示响应内容已经解析完毕可以在客户端使用了 只有当 readyState 4 的时候我们才可以正常使用服务端给我们的数据配合 http 状态码 status200 两个条件都满足本次请求才可以完成 如果XMLHttpRequest对象的readyState属性值等于4表示异步调用过程完毕就可以通过XMLHttpRequest对象的 responseText 属性或 responseXml 属性来获取数据
使用 Ajax 发送请求时携带的参数 与 POST 相比GET 更简单也更快并且在大部分情况下都能用。 然而在以下情况中请使用 POST 请求 无法使用缓存文件更新服务器上的文件或数据库向服务器发送大量数据POST 没有数据量限制发送包含未知字符的用户输入时POST 比 GET 更稳定也更可靠 get 请求的参数就直接在 url 后面进行拼接就可以 const xhr new XMLHttpRequest()
// 直接在地址后面加一个 ?然后以 keyvalue 的形式传递 // 两个数据之间以 分割
xhr.open(get, ./data.php?a100b200)
xhr.send()这样服务端就能接受到两个参数 一个是 a值是 100一个是 b值是 200 post 请求的参数是携带在请求体 send() 中的所以不需要再 url 后面拼接 const xhr new XMLHttpRequest()
xhr.open(post, ./data.php)
xhr.send(a100b200)
// 如果是用 ajax 对象发送 post 请求必须要先设置一下请求头中的 content- type
// 告诉一下服务端我给你的是一个什么样子的数据格式 xhr.setRequestHeader(content-type, application/x-www-form- urlencoded)Ajax 封装使用实例 index.html 文件 !DOCTYPE html
html
headmeta charsetUTF-8
/head
bodydivpart_one/divinput typebutton value点击局部刷新 onclickpart_refresh()div idd1/div
/body
scriptfunction part_refresh(){// 创建点击 button 触发刷新的方法var xhr new XMLHttpRequest();// 创建 Ajax 对象xhr.onreadystatechangefunction re(){// 当 readyState 的值发生变化时执行此方法中的代码 if(xhr.readyState4 xhr.status200){// 当内容解析完毕并且成功处理了请求时执行语句document.getElementById(d1).innerHTMLxhr.responseText;// 在网页上第二个 div 标签内输出获取的 xhr 对象文本格式的响应数据}}xhr.open(GET,aj.php,true);// 配置连接信息xhr.send();// 发送请求}
/script
/htmlaj.php 文件 ?php
$str hello;
echo $str;
?将 index.html 文件和 aj.php 文件放入 PHPstudy 的 www 目录下 开启 phpstudy 在浏览器地址栏打开 127.0.0.1/index.html 点击局部刷新按钮后 可以看到第二个源代码 div 块中的值发生变化
局部刷新与整页刷新的区别 整页刷新 手动更改源代码中第一个 div 块中的文本内容 点击整页刷新按钮发现更改的内容恢复到更改前的状态 Ajax 局部刷新 手动更改源代码中第一个 div 块中的文本内容 点击局部刷新按钮发现手动更改的内容未发生改变而下方刷新出来了新的内容源代码中手动更改的 div 块未改变第二个 div 代码块刷新后发生改变
前端跨域问题 同源策略 协议域名端口三者相同即便两个不同的域名指向同一个ip地址也非同源 同源策略限制以下几种行为
Cookie、LocalStorage 和 IndexDB 无法读取DOM和JS对象无法获得AJAX 请求不能发送
URL说明是否允许通信127.0.0.1/index.html127.0.0.1/aj.php同一域名不同文件或路径允许http://www.domain.com:8000/a.jshttp://www.domain.com/b.js同一域名不同端口不允许http://www.domain.com/a.jshttps://www.domain.com/b.js同一域名不同协议不允许http://www.domain.com/a.jshttp://192.168.4.12/b.js域名和域名对应相同ip不允许http://www.domain.com/a.jshttp://x.domain.com/b.jshttp://domain.com/c.js主域相同子域不同不允许http://www.domain1.com/a.jshttp://www.domain2.com/b.js不同域名不允许
Ajax 练习
同步请求 环境 ajax.html 放在 phpstudy 的 www 页面下flag.php 放在 phpstudy 的 www 页面下浏览器访问 127.0.0.1/ajax.html开启 phpstudy 效果等待五秒同步刷新文本框和获取的 flag ajax.html 代码 !DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytextarea name idkuang cols30 rows10/textarea
/body
scriptvar xnew XMLHttpRequest;// 创建 Ajax 对象x.open(GET,http://127.0.0.1/flag.php,false);// 配置连接信息x.send();// 发送请求var flagx.responseText;// 创建变量 flag 接收数据console.log(flag);document.getElementById(kuang).valueflag;// 将文本框中的字符修改为获取的 flag
/script
/htmlflag.php 代码 ?php sleep(5); ?
ajax flag异步请求 环境 ajax.html 放在 phpstudy 的 www 页面下flag.php 放在 phpstudy 的 www 页面下浏览器访问 127.0.0.1/ajax.html 效果 浏览网页立刻加载文本框等待五秒后加载获取的 flag 点击局部刷新按钮五秒后flag 重新获取而页面不刷新 !DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytextarea name idkuang cols30 rows10/textareainput typebutton value局部刷新 onclickflush()
/body
scriptfunction flush(){// 创建点击 button 触发刷新的方法var xnew XMLHttpRequest;// 创建 Ajax 对象x.open(GET,http://127.0.0.1/flag.php,true);// 配置连接信息x.send();// 发送请求x.onreadystatechangefunction(){// 当 readyState 的值发生变化时执行此方法中的代码 var flagx.responseText;// 创建变量 flag 接收数据console.log(flag);document.getElementById(kuang).valueflag;// 将文本框中的字符修改为获取的 flag}}flush()/script
/html
