1e41f4b71Sopenharmony_ci# Customizing Page Request Responses 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe **Web** component supports customization of the response to intercepted page requests. You can call [onInterceptRequest()](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptrequest9) to customize web page responses, file resource responses, and more. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciWhen a resource loading request is initiated on a web page, the application layer will receive the request. The application layer then constructs a local resource response and sends it to the web kernel. On receiving the response, the web kernel parses the response and loads page resources accordingly. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ciIn the following example, the **Web** component intercepts the web page request **https://www.example.com/test.html** and constructs a custom response in the application code. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ci- Code of the **index.html** page: 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ci ```html 16e41f4b71Sopenharmony_ci <!DOCTYPE html> 17e41f4b71Sopenharmony_ci <html> 18e41f4b71Sopenharmony_ci <head> 19e41f4b71Sopenharmony_ci <meta charset="utf-8"> 20e41f4b71Sopenharmony_ci </head> 21e41f4b71Sopenharmony_ci <body> 22e41f4b71Sopenharmony_ci <!-- Page resource request -> 23e41f4b71Sopenharmony_ci <a href="https://www.example.com/test.html">intercept test!</a> 24e41f4b71Sopenharmony_ci </body> 25e41f4b71Sopenharmony_ci </html> 26e41f4b71Sopenharmony_ci ``` 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ci- Application code: 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ci ```ts 31e41f4b71Sopenharmony_ci // xxx.ets 32e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ci @Entry 35e41f4b71Sopenharmony_ci @Component 36e41f4b71Sopenharmony_ci struct WebComponent { 37e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 38e41f4b71Sopenharmony_ci responseResource: WebResourceResponse = new WebResourceResponse(); 39e41f4b71Sopenharmony_ci // Customize a response. 40e41f4b71Sopenharmony_ci @State webData: string = '<!DOCTYPE html>\n' + 41e41f4b71Sopenharmony_ci '<html>\n' + 42e41f4b71Sopenharmony_ci '<head>\n' + 43e41f4b71Sopenharmony_ci '<title>intercept test</title>\n' + 44e41f4b71Sopenharmony_ci '</head>\n' + 45e41f4b71Sopenharmony_ci '<body>\n' + 46e41f4b71Sopenharmony_ci '<h1>intercept ok</h1>\n' + 47e41f4b71Sopenharmony_ci '</body>\n' + 48e41f4b71Sopenharmony_ci '</html>' 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ci build() { 51e41f4b71Sopenharmony_ci Column() { 52e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 53e41f4b71Sopenharmony_ci .onInterceptRequest((event) => { 54e41f4b71Sopenharmony_ci if (event) { 55e41f4b71Sopenharmony_ci console.info('url:' + event.request.getRequestUrl()); 56e41f4b71Sopenharmony_ci // Intercept the web page request. 57e41f4b71Sopenharmony_ci if (event.request.getRequestUrl() !== 'https://www.example.com/test.html') { 58e41f4b71Sopenharmony_ci return null; 59e41f4b71Sopenharmony_ci } 60e41f4b71Sopenharmony_ci } 61e41f4b71Sopenharmony_ci // Construct a custom response. 62e41f4b71Sopenharmony_ci this.responseResource.setResponseData(this.webData); 63e41f4b71Sopenharmony_ci this.responseResource.setResponseEncoding('utf-8'); 64e41f4b71Sopenharmony_ci this.responseResource.setResponseMimeType('text/html'); 65e41f4b71Sopenharmony_ci this.responseResource.setResponseCode(200); 66e41f4b71Sopenharmony_ci this.responseResource.setReasonMessage('OK'); 67e41f4b71Sopenharmony_ci return this.responseResource; 68e41f4b71Sopenharmony_ci }) 69e41f4b71Sopenharmony_ci } 70e41f4b71Sopenharmony_ci } 71e41f4b71Sopenharmony_ci } 72e41f4b71Sopenharmony_ci ``` 73e41f4b71Sopenharmony_ci 74e41f4b71Sopenharmony_ciCreate a **CodeCache** object for a custom JS request response: If the resource of a custom request response is a JavaScript script, you can add the **ResponseDataID** field to the response header. After obtaining this field, the **Web** kernel generates a **CodeCache** object, which accelerates JavaScript execution. Any changes to the **ResponseDataID** field must be notified to the **Web** component. If the **ResponseDataID** field is not added, no **CodeCache** object is created by default. 75e41f4b71Sopenharmony_ci 76e41f4b71Sopenharmony_ciIn the following example, the **Web** component intercepts the web page request **https://www.example.com/test.js**; a custom response is constructed in the application code, with the **ResponseDataID** field added to the response header. 77e41f4b71Sopenharmony_ci 78e41f4b71Sopenharmony_ci- Code of the **index.html** page: 79e41f4b71Sopenharmony_ci 80e41f4b71Sopenharmony_ci ```html 81e41f4b71Sopenharmony_ci <!DOCTYPE html> 82e41f4b71Sopenharmony_ci <html> 83e41f4b71Sopenharmony_ci <head> 84e41f4b71Sopenharmony_ci <meta charset="utf-8"> 85e41f4b71Sopenharmony_ci </head> 86e41f4b71Sopenharmony_ci <body> 87e41f4b71Sopenharmony_ci 88e41f4b71Sopenharmony_ci <div id="div-1">this is a test div</div> 89e41f4b71Sopenharmony_ci <div id="div-2">this is a test div</div> 90e41f4b71Sopenharmony_ci <div id="div-3">this is a test div</div> 91e41f4b71Sopenharmony_ci <div id="div-4">this is a test div</div> 92e41f4b71Sopenharmony_ci <div id="div-5">this is a test div</div> 93e41f4b71Sopenharmony_ci <div id="div-6">this is a test div</div> 94e41f4b71Sopenharmony_ci <div id="div-7">this is a test div</div> 95e41f4b71Sopenharmony_ci <div id="div-8">this is a test div</div> 96e41f4b71Sopenharmony_ci <div id="div-9">this is a test div</div> 97e41f4b71Sopenharmony_ci <div id="div-10">this is a test div</div> 98e41f4b71Sopenharmony_ci <div id="div-11">this is a test div</div> 99e41f4b71Sopenharmony_ci 100e41f4b71Sopenharmony_ci <script src="https://www.example.com/test.js"></script> 101e41f4b71Sopenharmony_ci </body> 102e41f4b71Sopenharmony_ci </html> 103e41f4b71Sopenharmony_ci ``` 104e41f4b71Sopenharmony_ci 105e41f4b71Sopenharmony_ci- Application code: 106e41f4b71Sopenharmony_ci 107e41f4b71Sopenharmony_ci ```ts 108e41f4b71Sopenharmony_ci // xxx.ets 109e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 110e41f4b71Sopenharmony_ci 111e41f4b71Sopenharmony_ci @Entry 112e41f4b71Sopenharmony_ci @Component 113e41f4b71Sopenharmony_ci struct WebComponent { 114e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 115e41f4b71Sopenharmony_ci responseResource: WebResourceResponse = new WebResourceResponse(); 116e41f4b71Sopenharmony_ci // Customize response data. (The CodeCache object is created only when the response data length is greater than or equal to 1024 bytes.) 117e41f4b71Sopenharmony_ci @State jsData: string = 'let text_msg = "the modified content:version 0000000000001";\n' + 118e41f4b71Sopenharmony_ci 'let element1 = window.document.getElementById("div-1");\n' + 119e41f4b71Sopenharmony_ci 'let element2 = window.document.getElementById("div-2");\n' + 120e41f4b71Sopenharmony_ci 'let element3 = window.document.getElementById("div-3");\n' + 121e41f4b71Sopenharmony_ci 'let element4 = window.document.getElementById("div-4");\n' + 122e41f4b71Sopenharmony_ci 'let element5 = window.document.getElementById("div-5");\n' + 123e41f4b71Sopenharmony_ci 'let element6 = window.document.getElementById("div-6");\n' + 124e41f4b71Sopenharmony_ci 'let element7 = window.document.getElementById("div-7");\n' + 125e41f4b71Sopenharmony_ci 'let element8 = window.document.getElementById("div-8");\n' + 126e41f4b71Sopenharmony_ci 'let element9 = window.document.getElementById("div-9");\n' + 127e41f4b71Sopenharmony_ci 'let element10 = window.document.getElementById("div-10");\n' + 128e41f4b71Sopenharmony_ci 'let element11 = window.document.getElementById("div-11");\n' + 129e41f4b71Sopenharmony_ci 'element1.innerHTML = text_msg;\n' + 130e41f4b71Sopenharmony_ci 'element2.innerHTML = text_msg;\n' + 131e41f4b71Sopenharmony_ci 'element3.innerHTML = text_msg;\n' + 132e41f4b71Sopenharmony_ci 'element4.innerHTML = text_msg;\n' + 133e41f4b71Sopenharmony_ci 'element5.innerHTML = text_msg;\n' + 134e41f4b71Sopenharmony_ci 'element6.innerHTML = text_msg;\n' + 135e41f4b71Sopenharmony_ci 'element7.innerHTML = text_msg;\n' + 136e41f4b71Sopenharmony_ci 'element8.innerHTML = text_msg;\n' + 137e41f4b71Sopenharmony_ci 'element9.innerHTML = text_msg;\n' + 138e41f4b71Sopenharmony_ci 'element10.innerHTML = text_msg;\n' + 139e41f4b71Sopenharmony_ci 'element11.innerHTML = text_msg;\n'; 140e41f4b71Sopenharmony_ci 141e41f4b71Sopenharmony_ci build() { 142e41f4b71Sopenharmony_ci Column() { 143e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 144e41f4b71Sopenharmony_ci .onInterceptRequest((event) => { 145e41f4b71Sopenharmony_ci // Intercept the web page request. 146e41f4b71Sopenharmony_ci if (event?.request.getRequestUrl() == 'https://www.example.com/test.js') { 147e41f4b71Sopenharmony_ci // Construct a custom response. 148e41f4b71Sopenharmony_ci this.responseResource.setResponseHeader([ 149e41f4b71Sopenharmony_ci { 150e41f4b71Sopenharmony_ci // The value is a string of a maximum of 13 digits. It is a JavaScript identifier and must be updated to maintain consistency with JavaScript. 151e41f4b71Sopenharmony_ci headerKey: "ResponseDataID", 152e41f4b71Sopenharmony_ci headerValue: "0000000000001" 153e41f4b71Sopenharmony_ci }]); 154e41f4b71Sopenharmony_ci this.responseResource.setResponseData(this.jsData); 155e41f4b71Sopenharmony_ci this.responseResource.setResponseEncoding('utf-8'); 156e41f4b71Sopenharmony_ci this.responseResource.setResponseMimeType('application/javascript'); 157e41f4b71Sopenharmony_ci this.responseResource.setResponseCode(200); 158e41f4b71Sopenharmony_ci this.responseResource.setReasonMessage('OK'); 159e41f4b71Sopenharmony_ci return this.responseResource; 160e41f4b71Sopenharmony_ci } 161e41f4b71Sopenharmony_ci return null; 162e41f4b71Sopenharmony_ci }) 163e41f4b71Sopenharmony_ci } 164e41f4b71Sopenharmony_ci } 165e41f4b71Sopenharmony_ci } 166e41f4b71Sopenharmony_ci ``` 167